1. Posicionamento Absoluto com margin: auto

Ao aplicar margin: auto, o elemento se centraliza apenas horizontalmente por padrão. Para obter o efeito vertical, é necessário definir o posicionamento como absoluto, esticar as coordenadas para zero e garantir que o contêiner pai tenha posicionamento relativo.

<div class="container">
    <div class="box"></div>
</div>

.container {
    position: relative;
    width: 500px;
    height: 100px;
    background-color: #f0f0f0;
}
.box {
    position: absolute;
    inset: 0; /* Substitui top, right, bottom e left com valor 0 */
    width: 120px;
    height: 50px;
    margin: auto;
    background-color: #3498db;
}

2. Layout Flexível (Flexbox)

A maneira mais moderna e direta de centralizar itens é utilizando o Flexbox no elemento pai, distribuindo os eixos principal e transversal.

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 500px;
    height: 100px;
    background-color: #f0f0f0;
}
.box {
    width: 120px;
    height: 50px;
    background-color: #e74c3c;
}

3. Posicionamento Absoluto com Deslocamento

Com o elemento posicionado de forma absoluta, diferentes estratégias podem ser aplicadas dependendo do conhecimento prévio das suas dimensões.

Dimensões Conhecidas: Margens Negativas

Ao definir top e left em 50%, o canto superior esquerdo do elemento ficará no centro do pai. Aplicar margens negativas equivalentes à metade da largura e altura corrige o deslocamento visual.

.box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 50px;
    margin-top: -25px;
    margin-left: -60px;
    background-color: #2ecc71;
}

Dimensões Conhecidas: Função calc()

Uma alternativa mais semântica é utliizar a função nativa do CSS para subtrair a metade das dimensões diretamente nas propriedades de deslocamento.

.box {
    position: absolute;
    top: calc(50% - 25px);
    left: calc(50% - 60px);
    width: 120px;
    height: 50px;
    background-color: #9b59b6;
}

Dimensões Desconhecidas: Transformação

Se o tamanho do elemento for dinâmico, a propriedade transform com translate é a solução ideal, pois os valores percentuais da translação sempre referenciam o próprio tamanho do elemento alvo.

.box {
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #f1c40f;
    transform: translate(-50%, -50%);
}

4. Alinhamento de Texto e Altura de Linha

Para centralizar uma única linha de texto tanto horizontal quanto verticalmente, a combinação de text-align e line-height (igual à altura do contêiner) é bastante eficaz.

<div class="wrapper">
    <div class="text-content">Texto Centralizado</div>
</div>

.wrapper {
    width: 500px;
    height: 100px;
    background-color: #f0f0f0;
}
.text-content {
    line-height: 100px;
    text-align: center;
}

5. Layout de Grade (CSS Grid)

O Grid Layout oferece métodos robustos para centralização, seja aplicando propriedades no contêiner ou no item. Utilizar a propriedade abreviada place-items torna o código extremamente conciso.

Agrupando propriedades no contêiner pai:

<div class="grid-wrapper">
    <div class="grid-item">Conteúdo</div>
</div>

.grid-wrapper {
    display: grid;
    place-items: center; /* Atalho para align-items e justify-items */
    width: 500px;
    height: 100px;
    background-color: #f0f0f0;
}

Alternativamente, aplicando margin: auto no item filho dentro de um contêiner Grid:

.grid-item {
    margin: auto;
}

6. Tabela CSS (table-cell)

Uma técnica mais tradicional envolve emular o comportamento de uma célula de tabela com display: table-cell, permitindo o uso do vertical-align combinado com o alinhamento de texto.

.wrapper {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 500px;
    height: 100px;
    background-color: #f0f0f0;
}
.inline-item {
    display: inline-block;
}