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

Share Me
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Today now in this tutorial i will show you how to set vertical align middle div by css in html. So if you want to set a vertical align middle of text, image or div etc then we can set easily by using following this example. we can give vertical align on middle by several way. So here i also give you example also with output. Now we can use any of the example of vertical align middle by css. So here i also provide several example with difference css so we can easily find your best solution.

Example 1

So now in this example we can set vertical align middle by using display:table and display:table-cell property of css.

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

Read Also : How to count number of files in folder and remove all files in folder in laravel example?

Thanks for read this, I hope it will you. You can also follow us on Facebook.

About code chef

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by code chef →