Vertically Center Content

In this tutorial I will explain how to vertically center content of one div element inside another div element.

<div id="outer">
	<div id="inner"><span>Your content goes here!</span></div>
</div>

Display: Table; Solution

The easiest solution that I implement when I’m developing websites. The table and table cell solution which makes your div elements act as if they are a table so that you can use the vertical-align: middle; property. This technique is especially useful if you have a specific height requirement for the outer div element. Although, if your content happens to go past the size of this element then it will overflow out of the outer element.

#outer{
	display: table;
	height: 150px;
}

#inner{
	display: table-cell;
	height: 100%;
	vertical-align: middle;
}

Example below

Your content goes here!

Display: Flex; Solution

The second example I use, when I’m not so concerned about supporting old browsers is flex. The reason being is that you can set a minimum height to the outer element and your inner content can dynamically extend beyond that height without causing overflow. The outer element will resize to support the contents within.

#outer{
	display: flex;
	min-height: 150px;

	/* Extra Stuff Below (Keeps padding with outer element) [Not Necessary] */
	padding: 20px 0;
	box-sizing: border-box;
}

#inner{
	margin: auto;
}
Your content goes here!

Leave a Reply

Your email address will not be published. Required fields are marked *

Last Updated:
Author: Brice Viland