How to set vertical align middle div by CSS in HTML?

By Hardik Savani | January 22, 2016 | Category :

If you want to set vertical align middle text, image, div etc then you can set easily by using following example. you can give vertical align middle by saveral way. i also give you example with output. you use any of the example of vertical align middle by css. I also provide saveral example with difference css so you can easily find your solution.

Example 1

In this example you can set vertical align middle using display:table and display:table-cell property of css.





<style type="text/css">

body {

padding: 50px;


.outter {

width: 500px;background:green;color:white;height: 150px;border:1px solid red;display: table;


.main-content1 {

display: table-cell; vertical-align: middle;


.sub-content1 {

border:1px solid green; width: 50px; height: 50px; margin: auto;





<div class="outter">

<div class="main-content1">

<div class="sub-content1">







Try This......

Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.