Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
How to center a div vertically in all browsers?
Sponsered Link
#1
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*/
}
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)