Dead Center Layout Using Css Or Center Align A Div Horizontally And Vertically
- Saturday, August 7, 2010, 15:11
- Web Design
- Add a comment
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.
#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%;
}
The text is vertically and horizontally aligned center
as is the wrapper div. You can use a table as well without a height.
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.
About the Author
admin has written 12094 stories on this site.
Write a Comment
Gravatars are small images that can show your personality. You can get your gravatar for free today!
You must be logged in to post a comment.
