Verificação HTML: O elemento "center" está obsoleto. Use CSS em vez disso.

Sobre este problema HTML

O elemento <center> é uma tag HTML de apresentação que remonta aos primórdios do desenvolvimento web. A especificação HTML5 tornou-o formalmente obsoleto porque viola o princípio de separar conteúdo (HTML) de apresentação (CSS). Embora a maioria dos navegadores ainda renderize <center> corretamente por compatibilidade retroativa, confiar nele é desencorajado por várias razões:

Conformidade com padrões: Usar elementos obsoletos significa que o seu HTML não está em conformidade com a especificação HTML atual, o que pode causar erros de validação do W3C.
Manutenibilidade: Elementos de apresentação inline espalham o styling por toda a sua marcação, tornando mais difícil atualizar o design do seu site de forma consistente. O CSS permite-lhe controlar o layout a partir de uma única folha de estilo.
Acessibilidade: HTML semântico ajuda tecnologias assistivas a compreender a estrutura do conteúdo. O elemento <center> não carrega significado semântico e adiciona ruído ao documento.
Preparação para o futuro: O suporte do navegador para elementos obsoletos não é garantido indefinidamente. Usar CSS garante que o seu layout funcionará de forma confiável no futuro.

Para corrigir este problema, substitua cada elemento <center> por uma técnica CSS apropriada. A abordagem correta depende do que você está a centralizar.

Para conteúdo inline (texto, imagens, elementos inline), aplique text-align: center ao container pai.

Para elementos de nível de bloco (divs, sections, etc.), use margin: 0 auto juntamente com uma largura definida, ou use Flexbox no elemento pai.

Exemplos

❌ Obsoleto: usando `<center>`

<center>
  <p>This text is centered.</p>
</center>

✅ Corrigido: usando `text-align` para conteúdo inline

<div style="text-align: center">
  <p>This text is centered.</p>
</div>

Ou melhor ainda, use uma classe CSS para manter os estilos fora do seu HTML:

<div class="centered-text">
  <p>This text is centered.</p>
</div>

.centered-text {
  text-align: center;
}

❌ Obsoleto: centralizando um elemento de bloco com `<center>`

<center>
  <div>This box is centered.</div>
</center>

✅ Corrigido: centralizando um elemento de bloco com `margin: auto`

<div class="centered-box">
  <p>This box is centered.</p>
</div>

.centered-box {
  max-width: 600px;
  margin: 0 auto;
}

✅ Corrigido: centralizando com Flexbox

O Flexbox é uma forma poderosa e flexível de centralizar conteúdo tanto horizontal quanto verticalmente:

<div class="flex-center">
  <p>This content is centered.</p>
</div>

.flex-center {
  display: flex;
  justify-content: center;
}

✅ Aplicando a correção diretamente a um elemento

Se você apenas precisa centralizar o texto dentro de um único elemento, pode aplicar o estilo diretamente sem um wrapper:

<p class="centered">This paragraph is centered.</p>

.centered {
  text-align: center;
}

Em todos os casos, a conclusão principal é a mesma: remova o elemento <center> e use CSS para obter o efeito de centralização desejado. Isto mantém o seu HTML limpo, semântico e totalmente em conformidade com os padrões modernos.