Métodos de Centralização Horizontal e Vertical com CSS

Centralizar elementos horizontal e verticalmente é uma questão clássica em entrevistas de front-end. Existem diversas técnicas, cada uma com suas vantagens e limitações. A seguir, apresentamos as principais abordagens, com exemplos práticos e considerações de compatibilidade.

  1. absolute + margem negativa (largura/altura fixas)

Com posicionamento absoluto e margens negativas, centralizamos um elemento de tamanho conhecido.

<div class="container">
    <div class="item fixo">123123</div>
</div>

CSS:

.container {
    position: relative;
    border: 1px solid red;
    width: 300px;
    height: 300px;
}
.item {
    background: green;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

Compatibilidade: IE6+, Chrome4+, Firefox2+. Exige dimensões fixas.

  1. absolute + margin: auto (largura/altura fixas)

Definindo todas as distâncias como zero e margin como auto, o elemento se centraliza.

.item {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    margin: auto;
}

Compatibilidade similar ao método anterior.

  1. absolute + calc() (largura/altura fixas)

Usando calc() para ajustar a posição.

.item {
    width: 100px;
    height: 100px;
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

Requer IE9+, Chrome19+, Firefox4+.

  1. absolute + transform (largura/altura variáveis)

Com transform: translate(-50%, -50%), centralizamos sem conhecer as dimensões.

.item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Compatibilidade: IE9+, Chrome4+, Firefox3.5+.

  1. line-height + vertical-align (largura/altura variáveis)

Usando line-height no pai e vertical-align: middle no filho inline-block.

.container {
    line-height: 300px;
    text-align: center;
    font-size: 0;
}
.item {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    line-height: normal;
    text-align: left;
}

Compatibilidade: IE6+, Chrome4+, Firefox2+.

  1. writing-mode + text-align (largura/altura variáveis)

Propriedade writing-mode altera o fluxo do texto.

<div class="container">
    <div class="inner">
        <div class="item">123123</div>
    </div>
</div>

.container {
    writing-mode: vertical-lr;
    text-align: center;
}
.inner {
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}
.item {
    display: inline-block;
    margin: auto;
    text-align: left;
}

Compatibilidade: IE6+, Chrome4+, Firefox3.5+.

  1. tabela nativa (largura/altura variáveis)

Usando <table> para centralização.

<table>
    <tbody>
        <tr>
            <td class="container">
                <div class="item">123123</div>
            </td>
        </tr>
    </tbody>
</table>

.container {
    text-align: center;
}
.item {
    display: inline-block;
}

Funciona em todos os navegadores, mas gera código extra.

  1. display: table-cell (largura/altura variáveis)

Simula o comportamento de tabela apenas com CSS.

.container {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.item {
    display: inline-block;
}

Compatibilidade: IE8+, Chrome4+, Firefox2+.

  1. Flexbox (largura/altura variáveis)

A solução moderna mais simples.

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

Compatibilidade: IE10+, Chrome4+, Firefox2+. Recomendado para mobile.

  1. Grid (largura/altura variáveis)

Com CSS Grid, usamos align-self e justify-self.

.container {
    display: grid;
}
.item {
    align-self: center;
    justify-self: center;
}

Compatibilidade: IE10+, Chrome57+, Firefox52+. Uso limitado em projetos legados.

Resumo comparativo

Método Dimensões fixas? Compatibilidade PC Compatibilidade Mobile
absolute + margem negativa Sim IE6+, Chrome4+, Firefox2+ Android 2.3+, iOS 6+
absolute + margin auto Sim IE6+, Chrome4+, Firefox2+ Android 2.3+, iOS 6+
absolute + calc() Sim IE9+, Chrome19+, Firefox4+ Android 4.4+, iOS 6+
absolute + transform Não IE9+, Chrome4+, Firefox3.5+ Android 3+, iOS 6+
line-height Não IE6+, Chrome4+, Firefox2+ Android 2.3+, iOS 6+
writing-mode Não IE6+, Chrome4+, Firefox3.5+ Android 2.3+, iOS 5.1+
tabela nativa Não IE6+, Chrome4+, Firefox2+ Android 2.3+, iOS 6+
display: table-cell Não IE8+, Chrome4+, Firefox2+ Android 2.3+, iOS 6+
Flexbox Não IE10+, Chrome4+, Firefox2+ Android 2.3+, iOS 6+
Grid Não IE10+, Chrome57+, Firefox52+ Android 6+, iOS 10.3+

Tags: CSS centralização Flexbox grid position

Publicado em 7-17 05:15

Tags em Destaque

©2026 Doido Dev