Position Absolute Horizontal and Vertical Center via CSS
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..
Step 1:
First, throw down this (X)HTML markup:
<body>
<div id="distance"></div>
<div id="content">
<!-- absolutely centered content -->
</div>
</body>Step 2:
Next, 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 */
}Step 3: (optional)
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 */
}Discussion
Examining our CSS-centering 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 antiquity1. And finally, to get a better idea of how it works, try removing the padding and margin from the body selector and check the results.
Conclusion
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.
29 responses to “Position Absolute Horizontal and Vertical Center via CSS”
many thanks :)
very useful.
@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 :)
@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..?
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
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