Centralizando texto com css

Neste post trago um pequeno snippet em css muito útil nas elaborações de pequenos projetos.
Assim como muitos que trabalham com CSS já se deparou com problemas de como centralizar um determinado elemento em uma pagina, passando um determinado tempo riscando o código fonte de um lado para o outro e nunca atingir a perfeição, o código é como um padrão para centralizar quaisquer elemento seja ele texto ou imagem e sua adaptação é eficaz nas maiorias das vezes.


Para utilizar é bem simples, crie uma pagina e de o nome de index.html e dentro dela uma div com o nome do elemento desejado, neste caso devemos implementar um id de nome “texto-centralizado” como no código abaixo.

index.html – conteúdo da pagina index

<!DOCTYPE html>
<html lang="pt-br">
 
<head>
 
  <!-- caminho do arquivo de sua pagina CSS style.css -->
  <link href="style.css" rel="stylesheet">
 
</head>
 
<body>
 
<div id="texto-centralizado"> Este texto esta Centralizado! </div>
 
</body>
 
</html>

Crie uma folha de estilo com o nome de style.css e insira o código abaixo.

style.css – Solução definitiva para centralizar textos.

#texto-centralizado {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
    font-family: Pacifico, Calibri;
    font-size: 3em;
}

Salvando em um diretório a pagina html juntamente com a pagina de estilo e seu resultado seria isso ai em baixo:

Duvidas? deixe seu comentário e ate a próxima!