O quê? Outro artigo sobre centralização ?! Mas tudo o que precisamos fazer é usar display: flex | grid e depois align-items: center. Não, é align-content… espere… acho que é justify-content. Bom, vamos usar margin: auto, esse funciona o tempo todo, certo?
Apesar do número incontável de recursos online (mesmo CSS-Tricks tem um guia completo ), é fácil ficar confuso ao tentar centralizar um elemento, seja verticalmente, horizontalmente ou ambos). Tenho certeza de que você encontrará algo que funcione pesquisando no Google ou tentando combinações diferentes. Mas você realmente entende por que o código que você escolheu funciona? É o caminho certo para o seu caso de uso? Porque realmente depende e requer consideração!
Neste artigo, faremos uma nova exploração da centralização em CSS e, com sorte, você aprenderá algo novo ao final.
Eu já domino a centralização de CSS. Devo pular este artigo?
Fique comigo porque exploraremos truques ocultos e recursos modernos que você talvez não conheça – centralização segura, text-box, centralização no posicionamento da âncora, etc.
A centralização ainda é difícil?
Não, centralizar não é difícil. Considerando todas as diferentes e variadas maneiras de centralizar um elemento, é uma tarefa fácil que geralmente requer duas ou três linhas de código. Mas de quantas maneiras temos para centralizar um elemento? Fiz a contagem e consegui enumerar 100 maneiras diferentes de centralizar um elemento verticalmente e horizontalmente dentro de um contêiner .
Você está falando sério, 100 maneiras?! Isso é uma loucura.
Sim, 100 é um número ridiculamente alto para o que deveria ser uma tarefa simples, mas esse número é enganoso. Se você verificar a lista, verá que marquei cerca de 60 deles em vermelho, o que significa que eles são hackeados e não recomendados. Isso nos deixa com cerca de 30 abordagens válidas. E dentro dessas opções válidas, muitas são basicamente iguais, só que escritas de forma diferente, portanto podemos considerá-las redundantes.
No final das contas, o número de maneiras “únicas” e “válidas” de centralizar um elemento é inferior a 15 (ou mesmo 10), mas foi um exercício divertido enumerar os diferentes códigos que podem centralizar um elemento. Confira a lista completa , você pode aprender algo novo!
Vejamos as coisas da perspectiva de um iniciante. Para mim, que escrevo CSS dia e noite há anos, é fácil dizer “centralizar não é difícil”, mas e para um novato que lê isso e se depara com todas essas maneiras diferentes de centralizar as coisas? Não, não é nada fácil. align-items, align-content, justify-content, place-self, margin: auto. Que diabos?!
Muitas propriedades para uma tarefa que todos afirmam ser fácil! Bem, vamos escolher um código que funcione e seguir em frente. Afinal, se o item estiver no centro, tudo bem, certo? Vamos evitar fazer muito barulho em torno disso, ou os fanáticos por CSS vão gritar comigo.
Não pense assim! Centralizar pode ser difícil e tudo bem. Isso não significa que você é estúpido. Significa simplesmente que você precisa entender como funciona.
Não pule a importante etapa de “aprender” (como muitos fazem); caso contrário, você se verá copiando/colando muito sem realmente entender o que está acontecendo. Às vezes funciona, mas às vezes não, e pode ser muito frustrante.
Aprenda como alinhar antes de centralizar
Centralização nada mais é do que um caso especial de alinhamento em CSS, e alinhamento é um mundo complexo. Não é apenas esquerda, centro, direita ou superior, central, inferior. É mais do que isso. A boa notícia é que você pode aprender facilmente. Para esse propósito, escrevi um mergulho profundo que chamei de “Os fundamentos do alinhamento em CSS”.
É provavelmente um dos meus escritos mais longos, mas acredite, vale a pena seu tempo (e esforço). Explico como funciona o alinhamento em todos os diferentes métodos de layout CSS. Começa pela compreensão da teoria do alinhamento, que possui dois níveis de alinhamento (“conteúdo” e “item”) e dois eixos (horizontal e vertical).
Identificar o “conteúdo” e o “item” em cada layout é a chave para entender como tudo funciona. Insisto em “todo layout” porque presumir que funciona da mesma forma em todos os lugares é um erro muito comum.
Faça um favor a si mesmo e leia aquele artigo detalhado — você me agradecerá mais tarde! E uma vez que você entenda o conceito central de alinhamento, a centralização se tornará uma brincadeira de criança.
Devo usar Flexbox ou Grid?
Vejo muita gente que usa sempre o mesmo método para centralizar um elemento, seja qual for a situação. Você tem a equipe CSS Grid e a equipe Flexbox. Embora ambos funcionem, não aconselho você a pensar dessa forma. Lembre-se de que o objetivo é entender e evitar abordagens rápidas de copiar/colar.
Estude seu layout e seus requisitos e decida qual método usar. Talvez o seu caso exija position: absolute ou um simples text-align: center. Flexbox ou CSS Grid nem sempre são obrigatórios para centralizar coisas, e não há uma maneira melhor que outra.
Dito isto, se eu tiver que escolher algo, consideraria os seguintes códigos. Cada um para cada tipo de layout.
Nota: justify-items no contexto de um contêiner de bloco não é suportado por todos os navegadores. Por enquanto, é apenas Chrome, então considere usar o Chrome para ver as demonstrações a seguir.
As propriedades são definidas em um local (o contêiner) e os métodos são adequados para centralizar um ou vários itens.
Você não notará diferença ao centralizar um único item. Os três métodos se comportam da mesma forma.
Com vários itens, o Flexbox se comporta de maneira diferente. Possui um comportamento responsivo onde os itens são inicialmente dispostos horizontalmente e embrulhados quando o contêiner é estreitado. Redimensione o contêiner e veja o que acontece.
E com vários itens de tamanhos diferentes, todos eles se comportam de maneira diferente.
Começamos com três abordagens que nos dão o mesmo resultado “visual” ao trabalhar com um único item, mas ao adicionar mais itens, podemos ver claramente que eles são diferentes. Essa diferença é importante porque mostra que não se trata de escolher um código aleatório para centralizar as coisas. Trata-se de entender como cada código se comporta em diferentes situações e depois escolher o mais adequado. É errado supor que podemos centralizar da mesma forma usando Flexbox, CSS Grid, etc. Todos os métodos são diferentes e dependem de mecanismos diferentes, mesmo que dêem o mesmo resultado no contexto de um item.
Isso também explica por que tecnicamente temos 100 maneiras de centralizar as coisas. Temos diferentes tipos de layout e cada layout possui sua própria lógica de alinhamento. Mas quando a estrutura é reduzida a um item dentro de um contêiner, temos muitas opções, e muitos métodos podem parecer idênticos, mesmo que não sejam.
Então, deixe-me repetir: estude a lógica de alinhamento por trás de cada código para saber qual deles é adequado para seu caso de uso. Não copie/cole cegamente um código que simplesmente “funciona”.
E quanto à centralização do texto?
Ao centralizar “caixas”, geralmente não temos problemas se aplicarmos as propriedades corretamente. Mas uma vez que começamos a lidar com texto, pode ser complicado centralizar as coisas perfeitamente na vertical. Você conhece o espaço extra acima ou abaixo que não pode realmente controlar e precisa usar valores mágicos para altura da linha ou preenchimento para corrigi-lo.
Agora temos uma nova propriedade que nos permite corrigir isso: text-box . Ele corta o espaço extra com base na sua configuração.
Em ambas as caixas, alinho o conteúdo no centro usando um código comum. Observe que a primeira caixa não é tão boa. O texto parece estar errado, embora eu esteja usando as propriedades CSS corretamente.
É frustrante, certo? Para CSS tudo está perfeitamente centralizado, mas para nós não. por que!?
Está relacionado à forma como a fonte é desenhada e ao espaço reservado para cada caractere. Adicionar uma borda ao redor do texto deixará as coisas mais claras.
Como você pode ver, a “caixa de texto” está centralizada, mas há espaço indesejado dentro dela. Consegui remover esse espaço usando uma linha de código:
###PRE_e6c274dfb8a705525c7f1d88cfb95a0e###
Vamos tentar texto em letras minúsculas sem descendentes ou ascendentes.
Desta vez estou usando palavras-chave um pouco diferentes:
###PRE_9c11e7c12ba58e849d64cce13094d7cc###
…para remover o espaço para uma centralização perfeita
Os valores parecem estranhos e pouco intuitivos, mas eu criei um pequeno gerador onde você pode facilmente especificar qual espaço deseja cortar e obter o código rapidamente.
E se você quiser mais detalhes sobre esse recurso, verifique “Duas propriedades CSS para cortar espaços em branco da caixa de texto” de Danny Schwarz.
Centralização com posicionamento de âncora CSS
Em alguns casos, pode ser necessário usar posição absoluta ou fixa, o que significa que estamos lidando com um elemento fora de fluxo e uma lógica de alinhamento diferente; portanto, outra técnica de centralização.
A maneira comum de fazer isso é o clássico top/left combinado com translate:
###PRE_4b453eb77a6cd29d0c66b99387d74d35###
Funciona e todos ficam felizes, mas não é o código adequado para usar. Em 2026, eu consideraria esse código hackeado e vale a pena evitá-lo. É como criar layouts usando float . Essa era uma abordagem válida até termos o Flexbox e o CSS Grid, que foram projetados intencionalmente para esse tipo de coisa.
É a mesma coisa com elementos posicionados de forma absoluta. Hoje, é melhor contar com recursos CSS modernos como este:
###PRE_a41b2cc68f4ee42e535573c78d9587d4###
A propriedade inset controla o “bloco contendo inserção modificada” (IMCB) e place-self (a abreviação de justify-self e align-self) alinha o elemento dentro do IMCB. Explico todos esses conceitos detalhadamente neste artigo.
Onde está o posicionamento da âncora em tudo isso?
Ótima pergunta! Posicionamento da âncora depende de elementos absolutos (ou fixos) e possui seu próprio mecanismo para controlar o posicionamento de um elemento em relação à sua âncora. Estamos lidando especificamente com centralização, então temos que falar sobre um novo valor, anchor-center.
Vamos começar com o seguinte exemplo:
Estou colocando a caixa de texto acima da âncora usando position-area: top. Você pode arrastar a âncora e a caixa de texto permanecerá presa na parte superior e centralizada.
Vamos atualizar o alinhamento e usar place-self: center.
A posição parece um pouco errada à primeira vista, mas se você arrastar a âncora e olhar de perto, verá a caixa centralizada na área superior.
Centralizar não é realmente fácil! É confuso se você não sabe em que área seu elemento está centralizado. Você pensará que algo está quebrado porque seus olhos podem não ver isso como um elemento centralizado.
Se quiser voltar à posição anterior, você pode usar isto:
###PRE_842e3c20aa7e5fd0eef2e7e536d20890###
…ou este:
###PRE_a24c2b20efcb307f90306359a685c511###
O que está acontecendo aqui é que, verticalmente, colocamos o elemento no final (parte inferior), e horizontalmente, consideramos o centro do elemento âncora. Em outras palavras, o valor anchor-center é o que faz o elemento seguir a âncora quando você o arrasta!
Isso significa que temos duas maneiras diferentes de usar o posicionamento da âncora para centralização: (1) centralizar em relação à área selecionada usando o valor center ou (2) centralizar em relação à âncora usando o anchor-center valor.
Você raramente precisará usar o valor anchor-center na maioria dos casos porque o posicionamento da âncora vem com alinhamento padrão específico da área . Definir position-area deve ser suficiente, mas é bom saber como ajustar o alinhamento e entender a diferença entre center e anchor-center.
Se você deseja explorar o alinhamento no posicionamento da âncora, criei uma demonstração interativa que permite definir a área, ajustar o alinhamento e ver o resultado. Existem 36 posições diferentes que você pode definir usando position-area e cinco valores de alinhamento por eixo.
Centralização segura e insegura
Você provavelmente está se perguntando o que segurança tem a ver com centralização, certo? Não se preocupe, a centralização não apresenta riscos de segurança por si só, mas pode ser arriscado para o seu conteúdo!
Veja o seguinte exemplo:
Estou usando CSS Grid para centralizar um quadrado vermelho dentro de um contêiner e temos duas situações. O quadrado vermelho é menor que o contêiner (uma situação clássica) e o quadrado vermelho é maior que o contêiner (uma situação menos comum).
Em ambas as situações, o quadrado vermelho permanece centralizado, ou seja, seu ponto central corresponde ao ponto central do contêiner. Esta é uma abordagem de centralização insegura e, ainda assim, é o comportamento padrão de muitos métodos de centralização.
Por que não é seguro? O conteúdo dentro do contêiner está transbordando por todos os lados, portanto, se você decidir ocultar o estouro e adicionar uma barra de rolagem, algumas partes do conteúdo não poderão ser alcançadas, o que é uma forma de perda de dados . Neste caso, as partes superior e esquerda são perdidas. Isso é o que quero dizer com inseguro .
Tente rolar o segundo contêiner e você notará que não consegue ver as bordas superior e esquerda do quadrado vermelho.
Podemos corrigir isso usando safe alinhamento como este:
###PRE_b1835bdba59f5bc4f29711aa6048c690###
Agora, quando ocorre um overflow, o navegador irá deslocar o elemento para uma posição “mais segura” que exibe todo o conteúdo caso precisemos rolar. Em outras palavras, o navegador prioriza a visibilidade do conteúdo em vez da centralização (exatamente o oposto de um alinhamento inseguro).
Eu sei o que você provavelmente está pensando, e você não deveria estar pensando isso! Adicionar safe em todos os lugares não é uma boa ideia. Às vezes, o comportamento inseguro é realmente o que queremos, então considere safe apenas quando você se deparar com obstrução de conteúdo.
Vamos voltar à demonstração de posicionamento da âncora:
Se você arrastar a âncora para mais perto das bordas, a caixa será interrompida por essas bordas (o bloco que a contém) e o alinhamento padrão será perdido!
No posicionamento da âncora, o comportamento padrão é safe alinhamento. Se você não sabe disso, pode perder muito tempo tentando descobrir por que o elemento não está centralizado.
Você pode alterar esse comportamento usando a palavra-chave unsafe:
###PRE_bbafcaf865c607221332f902f8003b50###
Ou:
###PRE_7388f69db075d7cb1d55de502ffcb0a5###
Agora, o navegador permite que a caixa transborde o contêiner. Ele priorizará o alinhamento em vez da potencial perda de conteúdo devido ao estouro.
E se você acha que é inútil trabalhar com um alinhamento unsafe no posicionamento da âncora, então você está errado. Aqui está um caso de uso em que precisei mudar para um alinhamento inseguro. Temos um cabeçalho fixo com um pequeno ícone próximo ao título do site que você pode passar para mostrar uma dica de ferramenta. O cabeçalho fixo cria um bloco contendo a dica de ferramenta e, por padrão, evita que ela ultrapasse seu limite. Tive que usar um alinhamento inseguro para permitir o estouro e manter a dica de ferramenta posicionada corretamente.
Sei que pode ser confuso, mas você raramente precisará mexer na segurança. Continue usando o comportamento padrão do navegador, mas lembre-se de que você tem os valores safe e unsafe que você pode usar para corrigir um desalinhamento.
Conclusão
Espero que depois deste artigo você veja a centralização de um ângulo diferente. Não se trata de escolher um código que funcione e pronto. Trata-se de entender como o alinhamento funciona , considerar seu caso de uso e layout específicos, escolher o código apropriado e, mais importante, entender por que ele funciona.
O estado da centralização de CSS em 2026 originalmente escrito à mão e publicado com amor em CSS-Tricks . Você realmente deveria receber o boletim informativo também.
