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;
}

View demo or download source code.


22 Responses to “Absolute center a div”

  • Herb Says:

    Nice start. I look forward to more.
    Peace!

  • Thomas Says:

    I think this is a very clear and helpful guide. Thanks for the tutorial/blog, keep up the good work ^^

    - Thomas

  • Dizze Says:

    This is a great solution! Thank you for this tutorial. ;)

    Regards,
    Dizze

  • Dizze Says:

    By the way; It’s also Chrome compatible! (in windows 7)

  • Rolf Babijn Says:

    Thanks Dizze, I’ll add the compatibility in the blogpost!

  • latisse Says:

    On line das cool

  • Raleigh Christoforou Says:

    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.

  • Victoria Says:

    Dear admin, thnx for sharing this blog post. I found it wonderful. Greatest regards, Victoria…

  • Cherio Says:

    nice and thanks.

  • facial cleanser Says:

    wow its great post..

  • Elmo Chaix Says:

    Major thanks for the blog article.Thanks Again. Great.

  • diet Says:

    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.

  • Angle Foltz Says:

    Buenos dias son. First-rate post.

  • film streaming Says:

    You completed a few good points there. I did a search on the issue and found mainly persons will consent with your blog.

  • wpolscemamymocneseo Says:

    I just want to say I like it and thanks.

  • CSS Says:

    Very fantastic information can be found on web site.

  • David Says:

    Super handig ouwes!!

    супер удобен стари!!
    súper práctico de edad!!
    Super kätevä vanha!!

  • Solai Luke Says:

    It is a really interesting publish! Thanks for this! Together with best regards Luke aka couchgool.

  • Cristiano brasilia Says:

    I went over this internet site and I think you have a lot of good information, saved to bookmarks (:.

  • Joan Skinner Says:

    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?

  • Rolf Babijn Says:

    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.

  • help blogger Says:

    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!

Leave a Reply