Centralizar elementos em uma página web é uma das tarefas mais frequentes e fundamentais no desenvolvimento front-end com CSS. Este guia explora diversas abordagens para alcançar o alinhamento horizontal, vertical, ou ambos, para diferentes tipos de elementos.

Para ilustrar os exemplos, utilizarmeos a seguinte estrutura básica de CSS:

.container-pai {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

.elemento-filho {
  width: 100px;
  height: 100px;
  border: 1px dotted blue;
}

1. Centralização Horizontal com text-align: center

Esta propriedade é ideal para centralizar conteúdo de texto ou elementos inline e inline-block dentro de um elemento de bloco. Para centralizar um bloco inteiro, o bloco interno precisa ser um elemento inline ou inline-block.

<div class="container-pai" style="text-align: center;">
  <span style="display: inline-block; color: blue;">Texto e elementos inline-block centralizados horizontalmente</span>
  <p>Outro parágrafo centralizado</p>
</div>

2. Centralização Horizontal com margin: 0 auto

A técnica mais comum para centralizar blocos com largura definida. As margens horizontais são calculadas automaticamente para preencher o espaço restante igualmente em ambos os lados.

<div class="container-pai">
  <div class="elemento-filho" style="margin: 0 auto;">
    Bloco centralizado
  </div>
</div>

3. Centralização Vertical com line-height

Para um texto de linha única dentro de um contêiner com altura fixa, definir a line-height do texto igual à altura do contêiner o centraliza verticalmente.

<div class="container-pai">
  <div style="line-height: 200px; text-align: center;">
    Conteúdo alinhado na vertical
  </div>
</div>

4. Centralização Horizontal de Múltiplos Elementos com float e Posicionamento Relativo

Esta técnica permite centralizar elementos flutuantes através de um deslocamento percentual. O elemento pai recebe left: 50% e o elemento filho é movido para trás com left: -50% (usando position: relative para ambos).

<div class="container-pai">
  <div style="float: left; position: relative; left: 50%; clear: both; width: fit-content;">
    <span style="position: relative; left: -50%; display: block; border: 1px solid green; padding: 5px;">Primeiro item</span>
  </div>
  <div style="float: left; position: relative; left: 50%; clear: both; width: fit-content;">
    <span style="position: relative; left: -50%; display: block; border: 1px solid blue; padding: 5px;">Segundo item</span>
  </div>
</div>

5. Centralização com Layout de Tabela (display: table)

Utilizando a semântica e propriedades de tabelas HTML, é possível centralizar conteúdo. Elementos com display: table-cell permitem o uso de vertical-align: middle e text-align: center.

<table class="container-pai">
  <tr>
    <td style="vertical-align: middle; text-align: center;">
      Centralizado vertical e horizontalmente
    </td>
  </tr>
</table>

6. Simulação de Tabela para Centralização Vertical (display: table-cell)

Esta abordagem usa propriedades CSS para emular o comportamento de células de tabela, permitindo o uso de vertical-align: middle para centralização vertical.

<div class="container-pai" style="display: table;">
  <div style="display: table-cell; vertical-align: middle; text-align: center;">
    Conteúdo centralizado via display table-cell
  </div>
</div>

7. Centralização Horizontal e Vertical com Posicionamento Absoluto e margin: auto

Para elementos com dimensões fixas, pode-se usar posicionamento absoluto com top: 0; bottom: 0; left: 0; right: 0; e margin: auto;.

<div class="container-pai" style="position: relative;">
  <div class="elemento-filho" style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;">
    Bloco fixo centralizado
  </div>
</div>

8. Centralização com Posicionamento Absoluto e Margens Negativas

Esta técnica requer o conhecimento exato das dimensões do elemento filho. O elemento é posicionado em 50% do topo e 50% da esquerda, e depois movido para trás pela metade de sua própria largura e altura usando margens negativas.

<div class="container-pai" style="position: relative;">
  <div class="elemento-filho" style="position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px;">
    Centralizado com margens negativas
  </div>
</div>

9. Centralização com Posicionamento Absoluto e transform: translate

Considerada uma das formas mais flexíveis para centralizar, pois não exige o conhecimento prévio das dimensões do elemento filho. Utiliza top: 50%; left: 50%; combinado com transform: translate(-50%, -50%);.

<div class="container-pai" style="position: relative;">
  <div class="elemento-filho" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
    Flexível e sem depender de dimensões
  </div>
</div>

10. Centralização Horizontal e Vertical com Flexbox (eixo principal e cruzado)

O Flexbox simplifica drasticamente a centralização. Ao definir o contêiner pai como um display: flex, pode-se usar justify-content: center para o alinhamento no eixo principal e align-items: center para o eixo cruzado.

<div class="container-pai" style="display: flex; justify-content: center; align-items: center;">
  <div class="elemento-filho">
    Conteúdo Flex centralizado
  </div>
</div>

11. Centralização Horizontal e Vertical com Flexbox e margin: auto

Outra poderosa combinação com Flexbox é usar display: flex no pai e aplicar margin: auto; ao elemento filho. Isso centralizará o filho automaticamente em ambos os eixos.

<div class="container-pai" style="display: flex;">
  <div style="margin: auto; background-color: lightblue; padding: 10px;">
    Flexbox com margem automática
  </div>
</div>