Forum Discussion

Full Version: How to center a div vertically in all browsers?
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
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*/
}