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