Como centralizar uma div/elemento horizontalmente com CSS

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.

Referências