Como centralizar uma div/elemento horizontalmente com CSS
Neste artigo vou mostrar 5 maneiras bem simples de alinhar um elemento horizontalmente usando CSS. Deste modo você poderá aplicar o que melhor se encaixa em seu código e a sua necessidade.
<div class="pai">
<div class="filho">
</div>
</div>display: block
No primeiro caso o elemento interno deve ser do tipo block e ter uma largura definida:
.pai {
}
.filho {
display:block;
width:50%;
margin:0 auto 0 auto;
}display: inline-block
O segundo método consiste em transformar o elemento interno em inline-block, não sendo necessário declarar uma largura definida:
.pai {
text-align:center;
}
.filho {
width:auto;
display:inline-block;
}display: table
Outra maneira muita parecida com a anterior é utilizar o table:
.pai {
}
.filho {
width:auto;
display: table;
margin: 0 auto;
}position: absolute
O terceiro método é utilizando absolute no elemento interno, sendo obrigatório setar uma das seguintes posições no elemento externo: relative, fixed, absolute ou sticky. Neste caso o elemento interno também não precisa ter um uma largura definida:
.pai {
position:relative;
}
.filho {
background-color:blue;
width:auto;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}No código acima foi usado o left 50% para posicionar o lado esquerdo do elemento no centro e utilizamos o translateX para recuar metade da sua largura total para a esquerda.
Flexbox
Nosso último exemplo é utilizando CSS3. Hoje, uma das formas mais práticas e fáceis de alinhar elementos com certeza é utilizando flexbox:
.pai {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center;
}
.filho {
}Basta declarar o elemento externo como flex e usar justify-content: center.