Absolute Horizontal and Vertical Centering via CSS
by Jeff Starr on Tuesday, September 25, 2007 – 31 Responses
Recently, a reader named Max encountered some scrolling issues while implementing our absolutely centered layout technique. Of course, by “absolutely centered” we are referring to content that remains positioned dead-center regardless of how the browser is resized. After noticing the scrollbar deficiency, Max kindly dropped a comment to explain the issue:
…the div solution works well, only one problem maybe somebody can help: if you make the browser window smaller then the div is -> the scrollbar doenst fit right und you cant scroll over the whole area…
Apparently, because the horizontal/vertical centering method outlined in our original article employs absolute positioning with negative margins, resizing the browser to be smaller than the centered division results in cropped content that is inaccessible via scrollbar. Although this is the first I have heard about this issue, I went ahead and examined the alternate centering technique via the link generously shared by Max.
As it turns out, the proposed solution to the broken-scrollbar problem takes an entirely different approach to the absolute centering of a division (div). Rather than using an absolutely centered wrapper div to align the content, this alternate approach employs a floated “distance” div to set the relative height, and then floats the “content” div relative to the distance div. Sound confusing? Let’s check out the core functionality behind the technique..
First, throw down this (X)HTML markup:
<body>
<div id="distance"></div>
<div id="content">
<!-- absolutely centered content -->
</div>
</body>Then, apply the following (heavily commented) CSS:
html, body {
height: 100%; /* required */
}
body {
text-align: center; /* horizontal centering hack for IE */
padding: 0; /* required to "hide" distance div */
margin: 0; /* required to "hide" distance div */
}
div#distance {
margin-bottom: -10em; /* half of content height */
background: red; /* temporary - used to see div */
width: 1px; /* required to "hide" distance div */
height: 50%; /* required */
float: left; /* required */
}
div#content {
position: relative; /* positions content on top of distance */
text-align: left; /* horizontal centering hack for IE */
height: 20em; /* required - desired height */
width: 40em; /* required - desired width */
background: blue; /* cosmetic */
margin: 0 auto; /* required */
clear: left; /* required */
}Finally, if you are concerned about supporting the now-archaic Internet Explorer for Mac, use the following hack:
<style type="text/css">@import("ie5mac-only.css");</style>..to import a stylesheet with this rule (required only by IE5 for Mac):
html, body {
height: auto; /* required only for IE5 mac */
}Examining this code, we first notice the straightforward (X)HTML markup. As with our original method, only two divisions are required to make it work. Looking at the heavily commented CSS code, the trick behind this technique becomes clear.
After setting the document height to 100%, we invoke the ancient powers of the IE centering hack to center the “content” division horizontally. No surprises there. Then, the ol’ vertical magic happens thanks to the “distance” div, which is set at 50% height and floated left with a width of 1px. Finally, positioned relative to the distance div, the content div copmpletes the IE centering hack and establishes the final width and height of the absolutely centered division.
If I did my job, everything you need to implement this technique is explained via the comments in the code. Note that the last two blocks of code apply only to IE5 Mac, so feel free to exclude it if you could care less about such antiquity 1. And finally, to get a better idea of what exactly is happening with this method, try removing the padding and margin from the body selector and check the results.
Overall, this seems like a solid absolute-centering technique that would be somewhat easier to implement (less math) than our original version. Especially if you are experiencing the same scrollbar issues as Max, I would definitely give this method a try. According to the original author, this technique works in just about every browser that you would ever need. Of course, if you are concerned about potential layout conflicts arising due to floating your primary layout divs, you may want to consider the absolute-positioning technique. In any case, having a choice when it comes to CSS layouts is definitely a good thing ;)
Footnotes
- 1 Omitting the associated conditionally commented CSS rules for IE5mac will result in content that is repositioned outside of the browser window. However terrible, this only seems to happen when using an (X)HTML doctype. If your doctype happens to be HTML Transitional, this problem should not occur.
![[ Jeff Starr ]](http://images.monzilla.biz/serious/jeff-starr.png)
![[ Advertise Here ]](http://images.monzilla.biz/serious/adspot.png)
31 Responses
mlankton – #1
Ok, not so much related, but I have a newbie question. For xhtml I know that we are supposed to use style=”float: left/right;” instead of align. What do we do with css if we want to center an img or ad instead of floating it left or right? Sorry to jack the comments down a tangent, but I’ve looked and haven’t been able to figure it out. Thanks
Perishable – #2
mlankton,
No problem at all!
If you are centering images in standards-compliant browsers (i.e., not Internet Explorer), then centering may be accomplished by using the following CSS and XHTML:
div.wrap img {margin: 0 auto;}<div class="wrap"><img src="image.png" /></div>Basically, this method centers the image by setting its left and right margins to
auto. Standards compliant browsers such as Firefox and Opera correctly interpret and apply the CSS, however IE does not. To center the image in our previous example for Internet Explorer, we would use this:div.wrap {text-align: center;}Actually, the previous code will center block-level elements in virtually all major modern browsers, including IE. The
margin:0auto;rule is not currently needed. However, keep in mind that thetext-align:center;rule is intended for inline elements, and thus is used improperly when applied to images.It is also possible to center images using inline CSS, which may prove easier in certain situations. Simply wrap any image(s) in the following styled
div:<div style="text-align:center;"><img src="image.png" /></div>I hope that helps! ;)
mlankton – #3
That is ridiculously helpful, thank you very much. I never intended to learn any css or xhtml, but being ocd I just can’t use other people’s templates, and also being ocd, I can’t sleep at night if my xhtml doesn’t validate.
Perishable – #4
Well, you know how it goes..
Hanging out on the WWW with OCD will inevitably result in a case of CSS and XHTML ;)
D. Greene – #5
This is why I still use tables for some of my layouts, depending on the audience - I often encounter users that are accessing my sites with browsers more than six years old.
Perishable – #6
Absolutely. Table-based layouts are definitely useful in specific situations, especially when cross-browser compatibility and branding are important. I have used table-based layouts on a number of sites, including my personal business site, Monzilla Media. Check out the source code for plenty of table-based goodness ;)
Retec – #7
Hello,
I tried to make the website which looks like this: http://www.verexelto.sk/testit/test.php
but i have 2 problems:
1. When i shrink page vertically enough, the content goes down behind the footer. (It should not)
2. When i shrink page horizonatally enough, using the scrollbar I cannot see the left side of the page.
I tried to use technique u mentioned , it works, but then i loos the other functionality of the page (footer olways on the bottom if content is smaller then window height …)
Is it possible to solve it?
Thanx in advance
Perishable – #8
Retec,
I noticed an abundance of
position: absolute;declarations sprinkled throughout your CSS code. I would try experimenting with the relevant aspects of the technique described in the article above. As much as I would like to help visitors solve all of their specific CSS issues, unfortunately I simply do not have the time. However, I am more than happy to share general information, suggest possible clues and help troubleshoot whenever possible.mlankton – #9
I need a hand. My site is not so much a blog, and I decided to ditch the left sidebar in favor of a top navbar.
I have not been able to center align the navbar no matter what I’ve tried. Help.
Also, would there be any way to make the navbar expand and contract so that users of all screen resolutions get something that looks ok? As is, I barely got this to work at 1024×768, and if that user isn’t viewing fullscreen, then my navbar wraps and screws up the site’s formatting.
Thanks
Perishable – #10
Hello mlankton, good to see you again :)
Those are some pretty specific CSS issues, I might say. Without a test case to look at, it would be very difficult to even know where to begin — there are millions of possible variables involved, any one of which possibly leading to a solution. If you setup and point to a test case that I can check out, I will gladly have a look and see if anything jumps out at me. As mentioned in a previous comment, digging into the nitty-gritty details of CSS code really zaps the time away, but I will definitely see what I can do.. ;)
mlankton – #11
Thanks. I cobbled together a navbar yesterday at work. Today I found something I can modify to be more like what I want. You may still get an email from me with a stylesheet attached on the new one :)
Bender – #12
I like how you don’t die if you have at least one ring.
Christian – #13
Thanks for the code Perishable.
It gives me inspiration for my current project. However, I still face some problems in combining codes from various source.
My goal is similar to the current Hotmail login page where:
*) the vertical distance of centered stuff to the browser’s border will shrink if I shrink the browser vertically and
*) the footer always stick to the bottom.
Do you have any suggestion?
or anyone?
Thanks in advance =)
Nishanthe – #14
I had many problems with using CSS positioning. Your article helped to clarify it.
Thank you
Perishable – #15
You are welcome, Nishanthe — thank you for the positive feedback! :)
Jason – #16
Thanks very much for your code and clarification on everything. I was having a wicket time on my /specs page with trying to get my images centered correctly. It would work in one browser and would be terrible in the next. In addition, I WAS using tables to try and break it apart and it still didn’t help.
It still isn’t PERFECT in IE but its very close and now works perfectly in firefox.
I really wanted to say thanks, you saved me a ton of headaches! Great job.
NicMartel – #17
[Display: none;]problem!
2 DIVs, both float: right; DIV1 display: block; has a background picture and some wording. DIV2 display: none; has no background, and an
<img>tag. DIV1 displays correctly with background, and DIV2 is not displayed as expected. I click a button that loads a picture, DIV1 is set to display: none and disappears, while DIV2 is set to display: block and appears with the picture where DIV1 was. ALL IS WELL. I click a second button that recals DIV1 by setting DIV2 to display: none and DIV1 to display: block, and PROBLEM: it shows ok except that the picture remains on the screen on top of DIV1??? I am not sure if DIV2 is still on top or if it is just the picture that remains??? It is as though IE(7) puts the img tag in a different context than its original (DIV2)? I would greatly appreciate a clue to get me out of this impass. Thank you.Emyyy – #18
Hi! This is very helpful. However when I tried to implement it the html {height:100%} actually pushes down the content by 100% of the browser height… However if I take out height for html then the distance div will not appear!
My html code is valid! I was wondering if anything can help me identity the issue with the html height.
Perishable – #19
Hi Emyyy, without an actual example to look at, it is difficult to determine the issue. Nonetheless, if it were me, I would begin with a document that contained exactly the code presented in the article. Make sure you can get that working first, and then tweak it to serve your specific needs. This will enable you to catch any modifications that might “break” the layout. I hope that helps! ;)
linkdor web directory – #20
Very good ideas, but we all have to be sure that it will look good on all explorers. It’s true that 90 percent of out visitors use IE and Mozilla but the remaining 10 will always have their own version of navigator, so we care about all of them no ?
Robert – #21
Very helpful article thanks heaps.
Maloblanco – #22
Hey Perishable ,
Thank you very much for this tutorial. It has saved my ass on a current project at the studio!
It’s really helpful. As in my project I’m using embedded flash, I went for “px” instead of “em” and it works smoothly.
Cheers
Jeff Starr – #23
Excellent! Glad to hear the article is still useful! Thanks for the feedback :)
Adedoyin Kassem – #24
Hi there, nice tip here but i have one problem with this particular tutorial and it is the fact that this code does not work on Google chrome!
Can you ix this please? I would be looking forward to your reply
James – #25
many thanks :)
very useful.
Jeff Starr – #26
@Adedoyin Kassem: it seems to work fine for me, but I will certainly look into it this weekend back at the lab. In the meantime, check out the example page linked to in the article; that may provide additional information that will help.
@James: you’re welcome! Thanks for the feedback :)
Jeff Starr – #27
@Adedoyin Kassem: Yep, this method works just fine in Google Chrome (tested this morning), as well as all other modern browsers. Perhaps something got mixed up in the implementation..?
Alamgir Shams – #28
Hi,
Would anyone be so kind to help me for vertically center the page: http://www.bizworld.com.pk/Contact.html for all browsers
alamgirshams@yahoo.com
Rutger – #29
You made my week! I designed several websites with a centred div. At first Dreamweaver CS3 looked helpful with that but with their container/css method some of my clients complained about disappearing menus etc. When I found out it had to do with the height of their visitors screen I googled myself around the world for a solution. Till I found your site today, implemented the method in my sites in a breeze and now always the top of the div stays visible.
Thanks again!
Rutger
Trackbacks / Pingbacks