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>

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.

	display: table;
	height: 150px;

	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.

	display: flex;
	min-height: 150px;

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

	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