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

By Hardik Savani | January 22, 2016 | | 990 Viewer | Category : HTML CSS


Share this post:

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

Code:

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

Example 2:

In this example you can set vertical align middle using position:absolute and position:relative property of css.

position

Code:

<html>

<head>

<title></title>

<style type="text/css">

.body {

padding: 50px;

}

.main-content2 {

position: relative;height: 150px;width: 500px;background:green;color:white;border:1px solid red;

}

.sub-content2 {

position: absolute; height: 50px; width: 50px; top:0; bottom: 0; left:0; right:0;

margin: auto; border: 1px solid green;

}

</style>

</head>

<body>

<div class="main-content2">

<div class="sub-content2">

<p>Position</p>

</div>

</div>

</body>

</html>

Example 3:

In this example you can set vertical align middle using display:flex, justify-content: center and align-items: center property of css.

display:flex

Code:

<html>

<head>

<title></title>

<style type="text/css">

.body {

padding: 50px;

}

.main-content3 {

height: 150px;width: 500px;background:green;color:white;border:1px solid red;display: flex;align-items: center;justify-content: center;

}

</style>

</head>

<body>

<div class="main-content3">

<div class="sub-content3">

<p>display:flex</p>

</div>

</div>

</body>

</html>

Example 4:

In this example you can set vertical align middle using position and transform property of css.

translate

Code:

<html>

<head>

<title></title>

<style type="text/css">

.body {

padding: 50px;

}

.main-content4 {

position: relative;height: 150px;width: 500px;background:green;color:white;border:1px solid red;

}

.sub-content4 {

position: absolute; height: 50px; width: 50px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border: 1px solid green;

}

</style>

</head>

<body>

<div class="main-content4">

<div class="sub-content4">

<p style="color:white">Transform</p>

</div>

</div>

</body>

</html>

Try this......