Tag HTML <center>
A tag <center> alinha o conteúdo ao centro. O equivalente em CSS é a propriedade text-align. Veja exemplos.
A tag HTML <center> é obsoleta e não deve ser usada em páginas novas. Era um elemento de nível de bloco que centralizava horizontalmente tudo que estava dentro dela, mas foi removida do padrão HTML e não é mais suportada no HTML5. Os navegadores modernos ainda podem renderizá-la por compatibilidade retroativa, mas seu comportamento não é garantido e ela não será validada.
Esta página explica o que a <center> costumava fazer e, mais importante, apresenta as técnicas CSS que a substituem: text-align: center para conteúdo inline, margin: 0 auto para elementos de bloco e Flexbox para centralizar tanto horizontalmente quanto verticalmente.
A tag <center> é uma tag HTML obsoleta e não é suportada no HTML5. A apresentação pertence ao CSS, não à marcação HTML. Use as técnicas CSS abaixo.
A diferença conceitual: centralização inline vs. de bloco
Antes de escolher uma técnica, decida o que você está centralizando. Essa é a fonte de confusão mais comum.
- Centralizar conteúdo inline (texto, imagens, elementos inline) dentro de um contêiner: use
text-align: centerno contêiner. O contêiner mantém sua largura total; apenas o conteúdo se desloca para o centro. - Centralizar um elemento de bloco (um
<div>,<section>, um card) dentro de seu pai: usemargin: 0 autono próprio bloco. O bloco deve ter uma largura menor que seu pai; caso contrário, ele já ocupa toda a linha e não há nada a centralizar.
Em resumo: text-align centraliza coisas dentro de uma caixa; margin: auto centraliza a própria caixa.
Centralizando conteúdo inline com text-align
Aplique text-align: center ao elemento pai. As dimensões do elemento não mudam — apenas o conteúdo interno é centralizado.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>This text is aligned to the left.</p>
<p style="text-align:center">And this one is placed in the center.</p>
</body>
</html>Esta é a substituição direta da <center> quando tudo que você quer é texto centralizado.
Centralizando um elemento de bloco com margin: 0 auto
Para centralizar horizontalmente um elemento de nível de bloco dentro de seu pai, defina uma width e configure as margens esquerda e direita como auto. O navegador divide o espaço horizontal restante igualmente nos dois lados.
margin: 0 auto é uma abreviação para "0 acima/abaixo, auto esquerda/direita." Internamente, define margin-left e margin-right como auto.
A width é obrigatória. Um elemento de bloco sem largura definida ocupa 100% do pai por padrão, não deixando espaço sobrando para as margens auto distribuírem — portanto, nada parece se mover. Assim que o elemento for mais estreito que seu pai, as margens auto o centralizam.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div style="margin:0 auto; width:50%; background:#eee;">
This block is centered horizontally.
</div>
</body>
</html>Note que margin: auto centraliza apenas horizontalmente — não centraliza um bloco verticalmente.
Centralizando nos dois sentidos com Flexbox
Quando você precisa centralizar o conteúdo horizontal e verticalmente ao mesmo tempo, o Flexbox é a escolha moderna e confiável. Torne o contêiner um flex container e use justify-content: center para o eixo horizontal e align-items: center para o eixo vertical.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div style="display:flex; justify-content:center; align-items:center;
height:200px; border:1px solid #ccc;">
<p>This box is centered both horizontally and vertically.</p>
</div>
</body>
</html>Aqui, display:flex transforma o <div> em um flex container, justify-content:center centraliza seus filhos ao longo do eixo principal (horizontal) e align-items:center os centraliza ao longo do eixo transversal (vertical). A height é definida para que haja espaço vertical no qual centralizar.
Para um guia completo dessas propriedades e do restante do modelo de layout, consulte O Guia Definitivo do Flexbox.
Como era a antiga tag <center>
Apenas para referência — não use isso em código novo. A tag <center> vinha em pares e centralizava tudo entre as tags de abertura e fechamento:
<p>This text is aligned to the left.</p>
<center>And this one is placed in the center.</center>A marcação moderna equivalente é simplesmente <p style="text-align:center">…</p>, mostrada acima.