Centering Text Inside a Container

This is a simple, yet very effective technique, that allows you to center text both vertically and horizontal within a containing div. This could be used to overlay text on banner images, menu boxes etc, adding a nice visual element to your website(s) or web app(s).

Centring the text horizontally is really straightforward, simple text-alignment covers that. To center it vertically we use the position property. Note that two position elements are needed; relative positioning for the outer container, and absolute positioning for the inner container.

Here’s a very simple example of what we want to achieve:

And here’s the code that does it:

<div style="position:relative;">
	<div style="height:150px;border:1px solid red;padding:2em;">
		<div style="text-align:center;position:absolute;top:0;left:0;right:0;top:50%;transform:translateY(-50%);margin:0 2em;">
			Some Text
		</div>
	</div>
</div>

For divs that have a variable height, you could also achieve this with:

position:relative;top:50%;transform:translateY(-50%);