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

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


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


Do you want to expert php developer or developer team for your projects ?
Contact US