Como centralizar uma div horizontalmente no CSS

No HTML, o div é um elemento essencial e é usado excessivamente no desenvolvimento de sites. No entanto, o principal é a eficiência de um desenvolvedor o elemento div para cumprir seu objetivo; A div está posicionada corretamente? É necessário estar alinhado central? Essas são as perguntas comuns que podem se perguntar na mente dos desenvolvedores quando pensam em aprimorar a aparência de uma página da web.

Esta posta.

Como centralizar uma div horizontalmente usando CSS?

Para centralizar um div horizontalmente, verificaremos as propriedades do CSS abaixo da lista abaixo:

• Propriedade da margem
• Propriedade da posição
• Propriedade de exibição

Vamos seguir em frente e explorar as propriedades listadas uma por uma.

Método 1: Use a propriedade da margem para centralizar uma div horizontalmente no CSS

No CSS, o “margem”A propriedade é utilizada para criar espaço em torno dos elementos HTML da parte superior, inferior, direita ou esquerda. Também podemos usar a propriedade de margem para centralizar os elementos, como div.

Para fazer isso, siga o exemplo dado.

Exemplo - Como usar o preenchimento

Aqui está o contêiner da nossa página HTML, e queremos alinhá -la no centro horizontalmente:

Em nosso arquivo CSS, especificaremos o “fronteira”Propriedade como valor“0.2em sólido”Para ver nosso elemento div, use o“largura”Propriedade ao longo do valor de“50%”Para substituir a largura padrão de nossa div. Por fim, defina o “margem”Propriedade e especifique seu valor como“auto”Para centralizar a div horizontalmente:

A imagem abaixo foi dada indica que alinhamos com sucesso o DIV adicionado no centro horizontalmente:

Método 2: Use a propriedade de posição para centrar uma div horizontalmente em CSS

Para definir a posição de diferentes elementos HTML, o “posição”A propriedade do CSS pode ser utilizada. Esta propriedade precisa ser combinada com o “esquerda”Propriedade para centralizar uma div horizontalmente.

Veja o exemplo para um melhor entendimento.

Exemplo

Para estilizar nosso contêiner, usaremos o “posição”Propriedade e defina seu valor como“absoluto”. Então, especifique o “esquerda”Propriedade com o valor“25%”. Ele criará espaço vago no lado esquerdo e alinhará a div ao centro:

Saída

Agora, vamos conferir o último método.

Método 3: Use a propriedade Display para centralizar uma div horizontalmente no CSS

O "mostrar”A propriedade controla como o elemento selecionado se comportará. Esta propriedade tem alguns valores principais que fornecem funcionalidades diferentes, como quando o “flex”O valor é usado com a propriedade Display para tornar a caixa ou contêiner flexível. Além disso, você também pode utilizar a propriedade Display junto com o “alinhado-itens”Para colocar a div no centro horizontalmente.

Exemplo

Dentro do nosso arquivo HTML, adicionamos uma tag com algum texto:

Vamos centralizar esta div

Utilize o “mostrar”Propriedade com a“flex”Valor para tornar a divisão flexível. Por fim, vamos centralizar o div usando “alinhado-itens”Propriedade e defina seu valor como“Centro”:

Saída

Nós compilamos os métodos mais fáceis de centralizar uma div horizontalmente no CSS.

Conclusão

Para centralizar uma div horizontalmente, “mostrar","posição", e "margem”As propriedades do CSS podem ser utilizadas. A propriedade Display precisa ser combinada com o “alinhado-itens”Propriedade e a propriedade de posição deve ser usada com o“esquerda”Propriedade para centralizar a div horizontalmente. Por outro lado, a propriedade de margem é suficiente para colocar a div no centro horizontalmente. Este artigo discutiu diferentes métodos para o centro alinhando uma div horizontalmente.