Centralizar as coisas com CSS não é algo trivial. Na verdade, centralizar na horizontal é até fácil, mas centralizar elementos na vertical já beira o impossível. Existem as maneiras antigas, com position por exemplo, mas que não passam de gambiarras. Dá para fazer com display: table; emulando uma tabela, mas também não é a melhor das soluções.
Como eu estou usando cada vez mais Flexbox, acho que já é uma boa hora de usarmos essa alegria em produção. Logo, segue aí a dica de como centralizar conteúdo na vertical e na horizontal usando só CSS com Flexbox.
Nosso HTML:
<body>
<div class="wrapper">
<div>
Tão simples quanto isso.
</div>
</div>
</body>
Nosso CSS:
html, body {
height: 100%;
min-height: 100%;
}
body {
font: 15px arial;
color: rgba(0, 0, 0, .7);
}
.wrapper {
height: 100%;
min-height: 100%;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.wrapper div {
padding: 40px;
border: 1px solid rgba(0, 0, 0, .3)
}
Rapidamente: estamos fazendo com que o HTML e o Body tenham uma altura de 100%, para que o nosso .wrapper consiga ocupar todo o espaço vertical da tela. Assim, podemos posicionar nosso div no centro.
No .wrapper, definimos a propriedade display: flex;, que avisa o navegador que os elementos filhos diretos do .wrapper deverão agir como flexbox. A propriedade align-items centraliza os elementos flex na vertical. A propriedade justify-content centraliza os elementos na horizontal. Perceba que usei o prefixo -webkit- por causa do Safari.
Olha só como está o status no CanIUse.
De 0 a 10, o quanto você recomendaria este artigo para um amigo?