Home » CSS & XHTML » Dead Center layout using CSS

2

How many of you have searched Google for “dead center align” or “vertical center css” and found results showing more than a million pages only to realize that most of them don’t give you the right solution you are looking for? Well, vertical centering has always been a nightmare for designers and developers. The solution we are looking at is not just limited to aligning text vertically center inside a container or a div tag. We need to vertically and horizontally center a div container in a browser. We need to align an object (a div or a table) whose height is unknown, inside a div.

The concept of aligning a div vertically center in a browser is pretty simple. It is achieved by absolutely positioning a div in half of the area height and moving up by half of its height. This is possible when you know the height of the div. Let’s see how it works. Here is the css style defined for the wrapper div with an ID “box”. The important thing to note here is the “left” and “top” parameters. These values are defined in percentage values. This really helps you to position a div in the center even when you don’t know the resolution of the browser screen. The top-left corner of the div is now sits in the center point of the browser. The next thing to do is move up the div half of its height and move left the div half of its width. This way the center point of the div is aligned to the center point of the browser. This is done by defining negative values for “margin-top” and “margin-left” attributes. See the css below.

#box {
  width:300px;
  height:120px;
  position:absolute;
  margin-left:-150px;
  margin-top:-60px;
  left:50%;
  top:50%;
  text-align:center;
  }

We have formed a div with a dimension of 300×120 and placed it in the center of the browser. Now, we need to have some text inside this wrapper div which should be again centered inside div both vertically and horizontally. In this case, we need to use some browser hacks and tricks. See the html code and we have now additional div tags to wrap the text and styles targeting different browsers.

<style>
#box>#floating { /*display:table for Mozilla & Opera*/
	display:table;
	position:static;
}
#floating { /*for IE*/
	width:300px;
	height:100%;
	position:relative;
}
#floating div { /*for IE*/
	position:absolute;
	top:50%;
	left:0px;
	width:100%;
}
#floating>div { /*for Mozilla and Opera*/
	display:table-cell;
	vertical-align:middle;
	position:static;
}
#floating div div {
	position:relative;
	top:-50%;
}
</style>
<div id="box">
    <div id="floating">
        <div><div>
             <p>The text is vertically and horizontally aligned center<br />
				as is the wrapper div. You can use a table as well without a height.</p>
        </div></div>
    </div>
</div>

Now what do you do when you want to vertically align a div or table whose height is not pre-defined? Simple! Set the height of the wrapper div to 100% and remove “top” and “margin-top” attributes. Now in the above html code, remove the text with a table or a div tag which doesn’t have a defined height. It works! Download the code and experiment it yourselves. If you found something more interesting, let us all know. Hope it helped.

Here is the full code download link: Dead Center align a DIV using CSS

2 Comments

  1. Steve says:

    Hello,
    Found this page when looking for away to center a flash swf in the middle of the screen with CSS… I have implemented and it works great tin Firefox… but I am having issues in IE8… Your sample code works fine in both, but my attempt only works in Firefox.. in IE I get a scroll bar and a lot of blank area under the swf.. here is a sample:
    http://www.standupsites.com/CaptainsWorld/2/Intro1.html
    I added different color borders to each div to see what is wrong and it appears that the:
    #floating div { /*for IE*/
    position:absolute;
    top:50%;
    left:0px;
    width:100%;
    }
    is the culprit… is there something I did wrong or is there a fix for this?

    Any assistance is appreciated.
    Steve

  2. Steve says:

    Think I got it… removed all the div’s except the #box and it seems to work great in both browsers now… Thanks!

Leave a Reply

Page optimized by WP Minify WordPress Plugin