⭐ 0
🔍
Texto Imagem PDF e Documentos Áudio Música Eletrônica Tempo Utilitários Validadores Esoterismo Jogos

Como centralizar uma div em CSS (Flexbox)

Crie visualmente um layout CSS flexbox: flex-direction, justify-content, align-items, flex-wrap e gap no contêiner, além de flex-grow, flex-shrink e flex-basis por filho, tudo com visualização ao vivo e CSS copiável.

Processando... 0%

Resultado

Aqui está a resposta direta para a pergunta mais frequente em CSS: para centralizar uma div, coloque display: flex, justifique-content: center e align-items: center em seu pai. É isso aí: três declarações no contêiner, e a criança fica perfeitamente centralizada tanto horizontal quanto verticalmente dentro dele, em qualquer tamanho. Esta página abre o gerador exatamente com essa combinação já aplicada, então a visualização abaixo mostra ele funcionando em três caixas numeradas agora.

Antes do flexbox, centralizar um div precisava de hacks: margin: 0 auto centralizado apenas horizontalmente e funcionava apenas em um bloco de largura fixa; centralização vertical significava posição: absoluta com margens negativas ou um truque de transformação, ambos frágeis no momento em que o conteúdo mudava de tamanho. justificar-conteúdo lida com o eixo principal e alinhar itens com o eixo cruzado - juntos eles centralizam em ambas as direções, independentemente da altura ou largura da criança, e é exatamente por isso que esse par se tornou a resposta padrão.

Arraste qualquer controle abaixo e observe as três caixas de visualização permanecerem centralizadas conforme o contêiner muda de forma ou adicione um espaço entre elas. Quando parecer certo, copie o bloco CSS na parte inferior diretamente para sua folha de estilo - ele funciona da mesma maneira em todos os navegadores modernos, sem necessidade de biblioteca.

🛡️
Executado no navegador

Seus arquivos e entradas nunca saem deste dispositivo. O processamento é executado totalmente offline. 100% seguro.

Formatos e regras aceitos

  • Controles de contêiner: direção flexível, justificar conteúdo, alinhar itens, flex-wrap e uma entrada de lacuna em pixels, aplicados ao vivo na visualização.
  • Três caixas secundárias codificadas por cores por padrão (somar até oito, remover até duas), cada uma com seus próprios campos flex-grow, flex-shrink e flex-basis.
  • Bloco CSS copiável com uma regra .flex-container mais uma regra .flex-item-N por filho que possui propriedades flexíveis não padrão.

Principais benefícios

✓ Cada controle de contêiner e cada flex-grow, flex-shrink e flex-basis de cada filho atualizam três caixas de visualização numeradas ao vivo, para que você veja exatamente o que suas regras de flexbox fazem antes de tocar em uma folha de estilo.
✓ O gerador imprime apenas regras filhas que realmente diferem dos padrões CSS, de modo que o código copiado permanece curto e legível em vez de reafirmar flex-grow: 0 em cada caixa.
✓ As páginas predefinidas resolvem os layouts que as pessoas procuram por nome: centralizar um div, uma barra de navegação logotipo-esquerda-links-direita e colunas flexíveis de largura igual - abra uma e a ferramenta já estará configurada.

Casos de uso

  • • Obtenha o CSS exato para centralizar um div tanto horizontal quanto verticalmente, observando o trabalho de justificar o conteúdo e alinhar os itens nas caixas de visualização ao vivo.
  • • Crie um layout de barra de navegação logo à esquerda e links à direita com space-between e align-items: center e, em seguida, copie o CSS do contêiner diretamente em seu componente de cabeçalho.
  • • Compare o espaço entre, o espaço ao redor e o espaço uniformemente lado a lado nas mesmas três caixas, em vez de adivinhar qual delas corresponde ao espaçamento desejado.