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

By Hardik Savani September 5, 2020 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......

Tags :

We are Recommending you