Forum Discussion
How to center a div vertically in all browsers? - Printable Version

+- Forum Discussion (http://forum-discussion.com)
+-- Forum: Coding Problems (http://forum-discussion.com/Forum-Coding-Problems)
+--- Forum: HTML and CSS (http://forum-discussion.com/Forum-HTML-and-CSS)
+--- Thread: How to center a div vertically in all browsers? (/Thread-How-to-center-a-div-vertically-in-all-browsers)



How to center a div vertically in all browsers? - Kelly - 03-27-2018

How to vertically center a div for all browsers?

I am going to show you that how you can center a div vertically for all browser using CSS. It will not included any JavaScript or any HTML table. It is just simple HTML and CSS. So here is the code.

HTML for vertically center a div
Code:
<div class="outer_div">
 <div class="middle_div">
   <div class="inner_div">

     <h1>Center div Vertically</h1>
     <p>I want this div to be [i]vertically centered[/i]</p>

   </div>
 </div>
</div>


CSS to align center a div vertically
Code:
.outer_div {
   display: table;
   width: 100%;
   height: 100%;
   position: absolute;
}

.middle_div {
   vertical-align: middle;
   display: table-cell;
}

.inner_div {
   margin-right: auto;
   margin-left: auto;
   width: 400px; /*Dummy length for example*/
}