Como centralizar uma div com Tailwind CSS

Centralizar elementos é uma das tarefas mais comuns durante o desenvolvimento de interfaces. Felizmente, o Tailwind CSS oferece diversas classes utilitárias que tornam esse processo simples e intuitivo.

Neste tutorial você aprenderá como centralizar uma div com Tailwind CSS utilizando Flexbox, Grid e outras técnicas.

Centralizando uma div horizontalmente

A forma mais simples é utilizar a classe mx-auto.

<div class="w-64 mx-auto bg-blue-500 text-white p-4 rounded">
    Conteúdo centralizado
</div>

Como funciona?

• w-64 define a largura da div.
• mx-auto adiciona margem automática nas laterais.
• A div ficará centralizada horizontalmente.

Importante: a div precisa possuir uma largura definida.

Centralizando horizontal e verticalmente

O método mais utilizado é através do Flexbox.

<div class="flex justify-center items-center h-screen">
    <div class="bg-blue-500 text-white p-6 rounded">
        Conteúdo centralizado
    </div>
</div>

Explicação das classes

• flex → Ativa o Flexbox.
• justify-center → Centraliza horizontalmente.
• items-center → Centraliza verticalmente.
• h-screen → Define altura igual à tela inteira.

Esse método é ideal para:

• Páginas de Login
• Landing Pages
• Modais
• Páginas 404
• Dashboards

Centralizando com CSS Grid

Outra solução bastante elegante é utilizar Grid.

<div class="grid place-items-center h-screen">
    <div class="bg-green-500 text-white p-6 rounded">
        Conteúdo centralizado
    </div>
</div>

A classe place-items-center centraliza tanto na horizontal quanto na vertical.

Centralizando apenas na vertical

<div class="flex items-center h-screen">
    <div class="bg-gray-800 text-white p-6 rounded">
        Conteúdo
    </div>
</div>

Neste exemplo apenas o alinhamento vertical será aplicado.

Centralizando apenas na horizontal

<div class="flex justify-center">
    <div class="bg-indigo-500 text-white p-6 rounded">
        Conteúdo
    </div>
</div>

Centralizando texto

<div class="text-center">
    Olá Mundo!
</div>

A classe text-center é utilizada apenas para alinhar textos.

Centralizando uma imagem

<img src="imagem.jpg"
     class="mx-auto rounded-lg"
     alt="Imagem">

O mx-auto também funciona perfeitamente para imagens.

Centralizando um botão

<div class="text-center">
    <button class="bg-blue-600 text-white px-6 py-2 rounded">
        Enviar
    </button>
</div>

Outra opção:

<div class="flex justify-center">
    <button class="bg-green-600 text-white px-6 py-2 rounded">
        Salvar
    </button>
</div>

Centralizando uma div dentro de outra

<div class="flex justify-center items-center h-96 bg-gray-100">
    <div class="bg-blue-500 text-white p-6 rounded">
        Div Centralizada
    </div>
</div>

Essa técnica é bastante utilizada em:

• Cards
• Dashboards
• Widgets
• Containers

Exemplo completo

<div class="min-h-screen flex justify-center items-center bg-gray-100">

    <div class="bg-white shadow-lg rounded-lg p-8 w-96">

        <h2 class="text-2xl font-bold mb-4">
            Login
        </h2>

        <input
            class="border w-full p-2 rounded mb-4"
            placeholder="E-mail">

        <button
            class="bg-blue-600 text-white w-full p-2 rounded">
            Entrar
        </button>

    </div>

</div>

Erros comuns

Esquecer a largura

Isso não funciona corretamente:

<div class="mx-auto">
    Conteúdo
</div>

O correto é:

<div class="w-64 mx-auto">
    Conteúdo
</div>

Não definir altura

Para centralizar verticalmente, utilize:

<div class="min-h-screen flex justify-center items-center">

Utilizar apenas justify-center

Lembre-se:

• justify-center controla o eixo horizontal.
• items-center controla o eixo vertical.

Qual método escolher?

• mx-auto → Centralizar horizontalmente.
• flex justify-center items-center → Centralizar na tela.
• grid place-items-center → Solução mais simples.
• text-center → Centralizar textos.

Conclusão

Agora você já sabe como centralizar uma div com Tailwind CSS utilizando diferentes abordagens. Para layouts modernos, o Flexbox continua sendo a opção mais utilizada, enquanto o CSS Grid oferece uma solução elegante e extremamente simples para centralizar elementos em ambos os eixos.

Escolha a técnica que melhor se adapta ao seu projeto e aproveite as classes utilitárias do Tailwind CSS para criar interfaces responsivas e organizadas.