Estou tentando centralizar verticalmente o conteúdo de um elemento que tem position: absolute
.
Consegui fazer o conteúdo se posicionar da metade para baixo do container, no entanto, da metade para cima o espaço fica "sobrando".
Como posso resolver isso apenas utilizando css?
Eis o meu código até o momento:
.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>
A ideia é que o elemento .container
sobreponha o elemento-pai, como se fosse um indicador de loading em cima de apenas um elemento na página.