I have an absolutly positioned element with content inside. It can be a <h1>
or a few <p>
tag. So I don't know the height of the content.
How can I vertically center the content inside the absolutly positioned div
?
HTML :
<div id="absolute">
<div class="centerd">
<h1>helo</h1>
<span>hi again</span>
</div>
</div>
CSS :
#absolute {
position:absolute;
top:10px;
left:10px;
width:50%;
height:50%;
background:yellow;
}
.centerd {
display:table-cell;
vertical-align:middle;
}
if you add display:table
to your #absolute
div you should get what you want: