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

No desenvolvimento da web, é crucial criar o layout do elemento corretamente. No entanto, muitas propriedades do CSS, como a caixa flexível CSS3, são úteis para ajustar o layout das páginas da web e elementos html. A caixa flexível é usada para organizar páginas e aplicativos da Web de maneira recursiva. Este modo Flexbox ajuda a criar layouts para páginas e aplicativos complexos da Web.

Esta postagem o guiará sobre como centralizar um elemento div para todos os navegadores usando CSS.

Como alinhar o elemento div usando CSS?

O elemento div pode ser alinhado verticalmente utilizando a propriedade de exibição “flex”Junto com o CSS“alinhado-itens”Propriedade e“Justify-Content" 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 “”Elemento e atribui a classe“conteúdo principal”. Entre as tags "", adicione um "”Elemento com os seguintes atributos:

• ““src”O atributo é utilizado para especificar o URL da imagem.
• ““alt”O atributo define algum texto que será exibido no lugar de uma imagem se não conseguir carregar.
• ““largura”O atributo é usado para ajustar a largura da imagem.
• Então, adicione o “

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

Aqui está o código HTML:

O laptop é um computador portátil também conhecido como computador de caderno.

No CSS, especificaremos várias propriedades de estilo para a div.

Classe de "Conteúdo Principal" de estilo

.conteúdo principal
Altura: 50%;
Background-Color: #46C2CB;
Size da fonte: 24px;
preenchimento: 10px;

As seguintes propriedades CSS são definidas no “conteúdo principal" aula:

• ““altura”A propriedade é 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”Propriedade define espaço em torno do conteúdo do elemento.

A partir da 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 do CSS que ajudam a centralizar o “”Elemento verticalmente. Adicione essas propriedades à classe “conteúdo principal”Que são usados ​​para acessar o elemento:

exibição: flex;
alinhado-itens: centro;

Aqui está a descrição:

• ““mostrar" propriedade "flex”É usado para tornar o layout da div flexível ao seu elemento.
• ““alinhado-itens”A propriedade CSS é definida como uma“Centro”, Que alinhará verticalmente os elementos div.

Saída

Você aprendeu a centrar um elemento div verticalmente para todos os navegadores usando CSS.

Conclusão

Para centrar verticalmente um elemento div, o CSS “mostrar”A propriedade é utilizada com o“flex" valor. Este valor torna o contêiner flexível aos seus elementos. Para alinhar verticalmente o elemento div, ajuste o “alinhado-itens”Propriedade e atribui -lhe um“Centro" valor. Este blog mostrou como usar o CSS para centralizar verticalmente os elementos de div em todos os navegadores.