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


CSS to align center a div vertically
.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*/

Forum Jump:

Users browsing this thread: 1 Guest(s)