Let’s vertical align your design elements with CSS and HTML! Despite how popular people search for this method, vertical centering your contents seems not easy than you think for beginners. Below method could be the one of the simplest ways you can make it happen.
DEMO: How to Vertically Align Middle with CSS
Vertical Align Demo
Box One
Vertical Align Center
Box Two
Vertical Align Middle
Box Three
Vertical Align Center
HTML
Copy the code below and paste into your HTML document.
<div class="div-outer">
<div class="div-inner">
<h4>Box One</h4>
<p>Vertical Align Center</p>
</div>
</div>
<div class="div-outer">
<div class="div-inner">
<h4>Box One</h4>
<p>Vertical Align Center</p>
</div>
</div>
<div class="div-outer">
<div class="div-inner">
<h4>Box One</h4>
<p>Vertical Align Center</p>
</div>
</div>
You can tweak around with different colors of the boxes or texts. Have fun!
CSS
Copy the code below and paste into your CSS document. You need to make the same min-height and line-height on the outer part of the div. In my case, I have 200px.
.div-outer {
min-height: 200px;
line-height: 200px;
}
.div-inner {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
In case if this css isn’t working, you can try as below.
.div-outer {
height: 80vh;
position: relative;
}
.div-inner {margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
You can tweak around with different colors of the boxes or texts. Have fun!
