Como centralizar verticalmente um elemento div para todos os navegadores usando CSS

No desenvolvimento web, é crucial criar o layout do elemento corretamente. No entanto, muitas propriedades CSS, como CSS3 Flexible Box, são úteis para ajustar o layout de páginas da Web e elementos HTML. O Flexible Box é usado para organizar páginas da Web e aplicativos de maneira recursiva. Este modo Flexbox ajuda a criar layouts para páginas da web e aplicativos complexos.

Este post irá guiá-lo sobre como centralizar um elemento div para todos os navegadores usando CSS verticalmente.

Como alinhar o elemento div usando CSS?

O elemento div pode ser alinhado verticalmente utilizando a propriedade display “ flex ” junto com o CSS “ itens de alinhamento ” propriedade e “ justificar-conteúdo ' propriedade. A propriedade “align-items” alinha o elemento verticalmente e a propriedade “justify-content” alinha o conteúdo horizontalmente.

Exemplo: Como centralizar verticalmente um elemento div com CSS?

Em HTML, primeiro, adicione um “

” e atribua a ele a classe “ conteúdo principal ”. Entre as tags “

”, adicione um “ ” elemento com os seguintes atributos:

---

---

• “ origem ” é utilizado para especificar o URL da imagem.
• “ tudo ” define algum texto que será exibido no lugar de uma imagem se não for carregado.
• “ largura ” é usado para ajustar a largura da imagem.
• Em seguida, adicione o “

  ” elemento para incorporar o parágrafo à página.

Aqui está o código HTML:

< div classe = 'conteúdo principal' >
< img origem = '/images/laptop-notepad.jpg' tudo = 'Notebook com bloco de notas e caneta' largura = '300' >
< p > Laptop é um computador portátil também conhecido Como um computador portátil. p >
div >

Em CSS, vamos especificar várias propriedades de estilo para o div.

Classe de estilo “conteúdo principal”

.conteúdo principal {
altura: cinquenta % ;
cor de fundo: #46C2CB;
tamanho da fonte: 24px;
preenchimento: 10px;
}

As seguintes propriedades CSS são definidas no “ conteúdo principal ' classe:

• “ altura ” é usada para ajustar a altura do contêiner
  .
• “ cor de fundo ” define a cor de fundo do elemento.
• “ tamanho da fonte ” especifica o tamanho da fonte do elemento.
• “ preenchimento ” define o espaço ao redor do conteúdo do elemento.

Na saída, você pode observar que o conteúdo do elemento div não está no centro:

Vamos seguir em frente para aplicar as propriedades CSS que ajudam a centralizar o “

”elemento verticalmente. Adicione essas propriedades à classe “ conteúdo principal ” que são usados ​​para acessar o elemento

:

tela: flex ;
itens de alinhamento: centro;

Aqui está a descrição:

• “ tela ' propriedade ' flex ” é usado para tornar o layout div flexível para seu elemento.
• “ itens de alinhamento ” A propriedade CSS é definida como “ Centro ”, que alinhará verticalmente os elementos div.

Saída

Você aprendeu como centralizar um elemento div verticalmente para todos os navegadores usando CSS.

Conclusão

Para centralizar verticalmente um elemento div, o CSS “ tela ” propriedade é utilizada com o “ flex ' valor. Esse valor torna o contêiner

flexível para seus elementos. Para alinhar verticalmente o elemento div, ajuste o “ itens de alinhamento ” e atribua a ela um “ Centro ' valor. Este blog mostrou como usar CSS para centralizar verticalmente elementos div em todos os navegadores.