Absolute center a div
In a recent experiment I tried to horizontally and vertically align a website. There are many ways to do that, but not all work in all the browsers or are XHTML strict valid and none of those solutions incorporated variable height.
In this tutorial I will show you how align a div element to the absolute middle with dynamic height. This is a great solution if you have a website with external sources such as data from databases, rss-feeds and so on.
The example works in Safari, Firefox, Chrome and IE8. Also an IE7 fix included in the source code.
Setting up the XHTML
To make the website stay in the center of the page, we need a total of three divs: container, centered and content as shown below.
<div id="container"> <div id="centered"> <div id="content"> <!-- content goes here --> </div> </div> </div>
Setting up the CSS
Now that we have the wrappers, it’s time to add the stylesheet.
First off is the div with an id of container, we would like to have it take up the full page and to display itself as a table.
Next is the centered div. To make sure we can position it correctly, we set the display to table-cell. If you want to include IE7, you need to set the position to absolute.
All we have to do now is to set the div 50% from the top and align it to the middle.
Last but not least is the content div. Because we want it to be also horizontally aligned to the middle, set the position to relative. That way we can take advantage of the right and left margins set to auto. Just don’t forget to put in the width of your website. The last thing to do is to set the top property to the value of -50%.
#container
{
position: absolute;
display: table;
height: 100%;
width: 100%;
}
#centered
{
#position: absolute; /* IE7 fix */
display: table-cell;
vertical-align: middle;
top: 50%;
}
#content
{
position: relative;
top: -50%;
width: 800px;
margin-right: auto;
margin-left: auto;
}
Bothered by the scrollbars?
When you want a clean look without scrollbars, you can set the overflow to hidden. This will hide the scrollbars, but if your site is too long, users won’t be able to scroll!
body
{
overflow: hidden;
}
March 19th, 2010 at 23:23
Nice start. I look forward to more.
Peace!
April 10th, 2010 at 17:25
I think this is a very clear and helpful guide. Thanks for the tutorial/blog, keep up the good work ^^
- Thomas
April 17th, 2010 at 12:53
This is a great solution! Thank you for this tutorial.
Regards,
Dizze
April 17th, 2010 at 21:04
By the way; It’s also Chrome compatible! (in windows 7)
April 22nd, 2010 at 13:52
Thanks Dizze, I’ll add the compatibility in the blogpost!
May 5th, 2010 at 09:34
On line das cool
December 24th, 2010 at 23:45
Thank you for for this great post. I’m always on the look out for content and was lucky to find you on Google I will surely be back againg to see what other great content you post.
December 26th, 2010 at 00:36
Dear admin, thnx for sharing this blog post. I found it wonderful. Greatest regards, Victoria…
December 26th, 2010 at 08:08
nice and thanks.
December 26th, 2010 at 18:54
wow its great post..
December 30th, 2010 at 04:20
Major thanks for the blog article.Thanks Again. Great.
December 30th, 2010 at 21:19
Hi thanks a lot for a discerning post, I really found your blog by mistake while searching on Goole for something else closely related, in any case before i ramble on too much i would just like to say how much I loved your post, I have bookmarked your site and also taken your RSS feed, Once More thank you very much for the blog post keep up the good work.
December 30th, 2010 at 21:47
Buenos dias son. First-rate post.
January 3rd, 2011 at 19:34
You completed a few good points there. I did a search on the issue and found mainly persons will consent with your blog.
January 6th, 2011 at 23:54
I just want to say I like it and thanks.
January 7th, 2011 at 00:25
Very fantastic information can be found on web site.
October 5th, 2011 at 10:20
Super handig ouwes!!
супер удобен стари!!
súper práctico de edad!!
Super kätevä vanha!!
December 1st, 2011 at 01:18
It is a really interesting publish! Thanks for this! Together with best regards Luke aka couchgool.
July 21st, 2012 at 20:02
I went over this internet site and I think you have a lot of good information, saved to bookmarks (:.
January 19th, 2013 at 22:32
So just to make sure I don’t get confused (which can happen very easily!) both the <center> and <div align=”center”> elements have been replaced by something newer?
January 20th, 2013 at 16:43
In newer versions of HTML the “<center>” tag and the “align” property has been deprecated. This happened because of splitting up the mark-up (HTML) and style (CSS). This is very useful for developing and browsers. You have a lot more control over element using classes.
If you want to center something in CSS, use “text-align: center” and “margin: 0 auto”. That way you can be sure it is properly displayed in all major browsers.
April 29th, 2013 at 08:57
It’s the best time to make some plans for the long run and it’s time to be happy. I’ve learn this submit and if I may I desire to counsel you few fascinating things or tips. Maybe you could write next articles referring to this article. I wish to learn more things about it!