CSS Vertically and Horizontally Center
How to Vertically and Horizontally Center a CSS Element?
Pre-css most centering was accomplished using the grid-like structure that tables provided. All fine and good, but the CSS positioning module offers layout options that tables could only dream of. Here's how to vertically and horizontally center an element in pure CSS.
The Container Element
#center { position: absolute; top: 50%; width: 100%; height: 1px; overflow: visible }
The goal here is to position the container element 50% from the top of the page. It's important that you specify a height for the container element and that its overflow be set to visible.
The Content Element
#main { position: absolute; left: 50%; width: 720px; margin-left: -360px; height: 540px; top: -270px }
The Content element is nested inside the Container element and is positioned 50% from the left, with a negative left margin half its width. This accomplishes the horizontal centering. For vertical centering, we give the element a negative top position that is half its height.
Note: Whenever you specify position (top:, left:) make sure you first specify position: absolute. While newer browsers will render the page without the position: absolute statement, older browsers may not, your CSS may not validate (or will validate with warnings). Bottom line it is always good practice to specify declarations when in doubt.
Putting it all together
A Real World Example
We invite you to browse on over to a site we developed for one of our clients - Endust.com. Here you'll see how this centering technique was taken advantage of.
Mastering CSS
For those of you interested in broadening your knowledge of style sheets, an affiliate of ours is currently offering books and video tutorials you may find useful. Check out How to Master CSS for more information.
Swik
Digg
Technorati
Del.icio.us
Stumble
Newsvine
Facebook
Curious about your centering example
Generally the width of my sites are known quantities, but the height of my site may not be. Any idea how you might expand this technique so that you wouldn't have to know the height before hand? (Or even the width before hand?)
Very nice site, by the way. The look is very inspiring.
Specifying height for the
Specifying height for the content element helps you achieve the same space at bottom and top. Check out my client's site - Endust - for an example. The first page is centered equally, but other pages the content extends down. The height gives you a starting position.
As for the exact amounts - you don't necessarily need to use pixels. You could use em's, percentages, or whatever your preferred unit is. Important is that the Content element is positioned 50% from the left, with a negative left margin half its width. This accomplishes the horizontal centering. For vertical centering, it needs to have a negative top position that is half its height.
Hope this helps!
Curious about your centering example
Thanks for your www.endust.com example but allas it seems to fall down the way all css vertical centering examples do. If you switch to 800x600 you lose a load of pixels from the top of your content and you cannot even scroll up to it, it is just lost.
And the more toolbars you have the worse this problem gets, on ie and firefox, god knows what safari does.
I never had these headaches in html because tables handled it easily and its a constant pain that moving to css means i have to explain to clients why i can't do something that was easy 10 years ago?
I am constantly amazed at how restrictive css is, is this really the future, someone show me the light. Preferably one that is still visible in all resolutions.
I see what you're saying
I see what you're saying with the top content getting cut off. The key is having your height less than or equal to 600. You can probably also add in extra margin at top and bottom to prevent this from happening - or specify an additional container to control the height.
I felt the same way you do about tables initially, but over the years I've learned to really appreciate CSS. The flexibility in positioning it allows is unparalleled, and the degree of control it warrants by allowing control over dozens or hundreds of pages is a huge time saver. It takes a while to get used to, and one of the big hurdles has always been compatibility differences between browsers.
That being said, tables are not completely dead - I still use them to organize tabular data at times. Actually, I also use them in some templates to position content first and menus last - used to be a bigger deal when search engines placed more priority on content at top.
CSS is also a stepping stone. Once the DOM and semantic languages become more prominent (such as XML and XSLT) our control over layout and the integration of data will be way more efficient than it is now.
Thanks
Thanks for the feedback and sorry about the rant.
If you get time, could you refine your example in the ways that you suggested and see if its possible to get something that works on all resolutions.
It would really help me apreciate css.
trevkin@gmail.com
No problem Actually I
No problem
Actually I appreciate the rant - it always helps to bring CSS discussions into the open to entice interest for anyone that has similar concerns.
I'm totally swamped with work at the moment but will give the example a crack when I have a minute.
IE 5.2 on a Mac
Hi, Tried the solution which was great for IE and Firefox on my PC and Safari and Firefox on my Mac, but NOT the now discontinued IE for the Mac. I know IE for Mac is not now supported but is there are way to get around this for the few people left that might still be using it? Interestingly the site example you mentione at http://www.endust.com/ does not display at all on IE for Mac - a complete grey screen. Maybe I shouldn't worry about supporting the old browsers? C
Older Browser Support
Hi there,
It's important to support older browsers to an extent. That extend should be determined by how many people still use the browser and how much time you have to invest in browser compatibility vs. the additional number of people you'll serve with that time. IE 5.2 for Mac is used by a negligible (< 0.5%) of users overall and therefore we did not invest additional time in optimizing for this browser.
IE for the Mac, was incidentally, a very poorly designed browser, and is part of the reason that Mac switched to Safari for OS X (an excellent, ACID (browser standards testing) compliant browser).
Cheers
Easier horizontal centering
Your horizontal centering works as I've used it before, but a much more simple way is doing the following in your style sheet:
CSS:
/* align the page and set the width */body { text-align: center; width: 100%; }
/* set a width, set margins, re-align text to left, set a background to see results more clearly */.content { width: 200px; margin-left: auto; margin-right: auto; text-align: left; background-color: #006666; }
I'm unable to test this on Mac, but it works in FF, IE6+ on Windows.
The horizontal centering
The horizontal centering example URL. been there since when????
http://bluerobot.com/web/css/center1.html
Are you asking how long the
Are you asking how long the above link has been online? I have no idea. There's many articles on horizontal centering out there, with many different techniques. The link you mention simply addresses auto-width margins. Our example addresses horizontal and vertical centering.
A better way?
I recently found this site which might prove useful... and works for me on Firefox 2 and IE 6 on a PC and Firefox 1.5 and Safari 2 on a Mac. http://exanimo.com/css/vertical-centering-with-a-floated-shim/
HORIZONTAL CENTERING IN IE AND FF USING CSS - THIS WORKS
And you don't have to know the size of your container! #one { text-align:center; margin:0px auto; width:100%; } #two { margin:0px auto; }
Getting scroll bars??
If you're getting scroll bars, make sure your body margins and padding are set to zero!
body {
margin:0;
padding:0;
}