CSS, center elements with varying width and height

Example markup where the width or height can change or is unknown:

<main>
 <div class="item-centered">
 <p>This content length may change based on user input.</p>
 </div>
</main>

Using CSS3 transforms and the translate property:

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%);
}

Example:

Codepen