Marcação de exemplo em que a largura ou altura pode mudar ou é desconhecida:
<main>
<div class="item-centered">
<p>This content length may change based on user input.</p>
</div>
</main>
Usando transformações CSS3 e a propriedade translate:
main {
position: relative;
}
// Vertically centered only
.item-centered {
position: absolute; // can also be relative
top: 50%;
transform: translateY(-50%); // left out prefixes for brevity
}
// Horizontally centered only
.item-centered {
position: absolute;
left 50%;
transform: translateX(-50%);
}
// Horizontally and vertically centered
.item-centered {
position: absolute;
left 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Exemplo: