Existem diversas maneiras para centralizar o conteúdo de uma <div>
verticalmente. Entretanto, quando tratamos de uma altura que não seja em pixels, as pessoas começam a pensar se há um método eficiente para isso.
Criei uma forma que achei eficiente e vim aqui a procura de alguém que ofereça uma proposta melhor, pois uma das maiores dificuldades que um front-end encontra hoje é centralizar um conteúdo de uma div que não tenha altura em pixels.
HTML:
<section>
<article>
<div>
<p>Centro</p>
</div>
</article>
</section>
CSS:
section{
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ddd;
display: flex;
flex-direction: column;
}
article{
flex: 1;
display: flex;
margin: 0 auto;
}
article > div{
margin: auto 0;
}