1
There are several ways to center the content of a <div>
vertically. However, when dealing with a height other than pixels, people begin to wonder if there is an efficient method for this.
I created a way that I found efficient and came here looking for someone who offers a better proposal, because one of the biggest difficulties that a front-end finds today is center a content from a div that does not have pixel height.
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;
}
Possibly related : http://answall.com/questions/2817/bestforma-de-centralizar-um-element-vertical-horizontally
– Gabriel Rodrigues