Como centralizar um texto horizontalmente e verticalmente usando o Flexbox

2. Agora vamos criar a classe "top" que irá definir o estilo para a <div> onde está o nosso texto. Nesta fase ainda não vamos alinhar o texto verticalmente: 

.top {
  width:600px;
  height:180px;
  margin:auto;
  background-color:#ff0000;
  font-family:Arial;
  color:#fff; 
}

     Onde:

• width - Define a largura da div em pixels;
• height - Define a altura da div em pixels;
• margin: auto - Centraliza a div "top" horizontalmente na página;
• background-color - Define a cor do fundo da div;
• font-family - Define a fonte do texto;
• color - Define a cor do texto;

Observação: Uma classe CSS poderá ser colocada no próprio documento HTML através das tags <style> </style> ou inseridas em uma arquivo ".css" externo.

Veja abaixo como ficou o nosso exemplo sem a centralização vertical do texto:

CENTRALIZANDO HORIZONTALMENTE E VERTICALMENTE

3. Vamos agora mostrar como você pode centralizar o texto horizontalmente e verticalmente utilizando as maravilhas do Flexbox: Na classe CSS "top", acrescente as propriedades display: flex; para definir a div como um elemento flexível,  justify-content: center; para centralizar o texto horizontalmente e align-items: center; para centralizar o texto verticalmente.

.top {
  display: flex;
  justify-content: center;
  align-items: center;
  width:600px;
  height:180px;
  margin:auto;
  background-color:#ff0000;
  font-family:Arial;
  color:#fff; 
}

DICA: O flexbox centraliza qualquer elemento HTML como textos, imagens, links, etc.

RESULTADO FINAL

Veja agora o nosso texto centralizado verticalmente:

TENTE VOCÊ MESMO

Veja no nosso editor HTML como foi feito o alinhamento vertical do texto do exemplo. No editor, altere os códigos da forma que você desejar até conseguir o design desejado. Depois é só copiar os códigos e colar no seu projeto. Clique no link abaixo para abrir nosso editor de testes. (Não esqueça de clicar no botão "Executar" para visualizar os resultados).

Tente você mesmo »  

CÓDIGO COMPLETO DO EXEMPLO

Para copiar e colar nos seus projetos.

HTML

<div class="top">
	<h1>Eu sou um título da página</h1>
</div> 

CSS

.top {
  display: flex;
  justify-content: center;
  align-items: center;
  width:600px;
  height:180px;
  margin:auto;
  background-color:#ff0000;
  font-family:Arial;
  color:#fff; 
}