Quais são as formas de centralizar elementos horizontalmente numa página web?

Existem várias formas comuns:

• text-align: Para elementos em linha (inline ou inline-block) dentro do bloco pai. O pai deve ter text-align: center.

• margin: auto: Para elementos de bloco (block). O elemento deve ter uma largura definida (width). O navegador distribui automaticamente o espaço disponível à esquerda e à direita.

  .element {
    width: 200px;
    margin: 0 auto;
  }
  

• Flexbox: Sistema de layout flexível. Aplica-se ao contêiner pai.

  .container {
    display: flex;
    justify-content: center; /* Alinha os elementos no eixo principal (horizontal) */
  }
  

• Grid: Sistema de layout bidimensional. Aplica-se ao contêiner pai.

  .container {
    display: grid;
    justify-items: center; /* Alinha o conteúdo das células horizontalmente */
  }
  

• Position: absolute e transform: Para elementos posicionados absolutamente com uma largura conhecida.

  .parent {
    position: relative;
  }
  
  .child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Desloca o elemento pela metade de sua largura para a esquerda */
  }
  

• Display: table e margin: auto: Raramente usado, mas possível.

  .element {
    display: table;
    margin: 0 auto;
  }