I'm trying to vertically center the content of an element that has position: absolute
.
I've been able to make the content position half-way down the container , however, halfway up the space is "left over."
How can I solve this just by using css ?
Here's my code so far:
.container {
position: absolute;
width: 100%;
height: 100%;
background: #ccc;
}
.content {
position: absolute;
top: 50%;
left: 25%;
width: 50%;
text-align: center;
}
<div class="container">
<div class="content">
<h1>Conteúdo</h1>
<p>Subtítulo</p>
</div>
</div>
The idea is for the .container
element to override the parent element, as if it were a loading indicator on just one element on the page.