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.

Table-cell

<html>

<head>

<title></title>

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

}

</style>

</head>

<body>

<div class="outter">

<div class="main-content1">

<div class="sub-content1">

<p>Table-cell</p>

</div>

</div>

</div>

</body>

</html>

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.