Centralizando um elemento na vertical e horizontal com Flexbox CSS

Centralizando um elemento na vertical e horizontal com Flexbox CSS

Muitas vezes queremos centralizar uma div na tela ou dentro de outra div, seja para fazer uma caixa de login, um aviso, ou simplesmente um formulário. Há muitas formas de fazer a centralização de uma box em uma página, sendo a mais fácil e recomendada utilizando flexbox.

No exemplo abaixo vamos centralizar uma div na tela:

<style>
html, body {
	/* body com altura mínima de 100% (100vh) para preencher a tela toda */
    min-height: 100vh;
}
body {
    margin: 0;
}
.flex-container {
    /* altura mínima de 100% (100vh) para preencher a tela toda */
    min-height: 100vh;
    padding: 0;
    margin: 0;
    /* display flex */
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    /* centraliza na vertical */
    align-items: center;
    /* centraliza na horizontal */
    justify-content: center;
}
.flex-item {
    background-color: gold;
    width: 100px;
    height: 100px;
    padding: 0;
    margin: 0;
}
</style>
<div class="flex-container">
    <div class="flex-item"></div>
</div>

No exemplo acima utilizamos o body e a div externa com a altura e largura para preencher a tela inteira. Declaramos a div flex-container como display: flex (com algumas variações para funcionar em todos os navegadores). Por fim utilizamos align-items: center para centralizar a div interna na vertical e justify-content: center para centralizá-la na horizontal.

Neste exemplo usei o min-height no lugar do height, porque se a altura do nosso flex-item for maior que a altura da tela a mesma irá acompanhar a altura do flex-item, pois está com height: auto (auto é o padrão caso nenhum height seja declarado).

Referências