CSS, elementos centrais com largura e altura variáveis

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:

Codepen