How to Center a Div
Finally, a pure CSS solution!
Centering a div horizontally and vertically has always been a pain for CSS. Not any more! With this trick, you can create a centered block in no time.
During my morning blog reading I happened upon a blog post by Matt Taylor on a nice way to horizontally center menus. While centering menus isn't a common design element, centering a box a window is. In fact, this is a very difficult problem for front end developers. I, myself, tend to give up and use a JavaScript hack to get it all centered up.
But after reading Matt's post, I discovered you can use his method vertically as well. I have uploaded a demo so you can see it in action.
The core of this method is that a wrapper is 50% of the body to the right, and the container is 50% of the wrapper to the left. Assuming the wrapper and the container are the same size, this will result in a centered block. The CSS looks like this:
#wrapper, #container {
height: 500px;
width: 600px;
}
#wrapper {
bottom: 50%;
right: 50%;
position:
absolute;
}
#container {
left: 50%;
position: relative;
top: 50%;
}From my testing, this works in IE 6 and 8, Firefox 3, Safari 3 and 4 and Opera 9. If you have tested it in anything else, post about it here.
Demo
Update: (04/12/2009)
After a bit more testing, it looks like the technique also works in IE7. Also, because the container will be the size of the wrapper, you only need to set the height and width of the wrapper. Also, you can even set the position of the wrapper to absolute in IE6 and fixed in everything else to get a nice "centered on scroll" effect that falls back to centered at the top for those who don't support it. Furthermore, if IE6 isn't a concern, setting a max-height: 100% and max-width: 100% to the wrapper will make sure that the box isn't centered when the window is smaller then the container. This will give a nice effect for small screens. The change would look like this:
#wrapper {
position: absolute;
bottom: 50%;
right: 50%;
height: 500px;
width: 600px;
}
#container {
position: relative;
left: 50%;
top: 50%;
}
It would be nice just to use 'margin: auto;' to centre div's.
Left by Benjamin Reid | Apr. 14, 2009 at 1:12am
Or, if you know the width and height of the element (as you do here) then just use one div and do the following:
#container {
position: absolute;
left: 50%;
top: 50%;
width: 600px;
height: 500px;
margin: -250px 0 0 -300px;
background-color: #f00;}
Left by JJenZz | Apr. 14, 2009 at 7:31am
Use margin: auto;
Open your demo and scale down the browser window a little. Your content starts disappearing. This won't happen if you use margin:auto;
(And it would be nice if you could provide a non-js Comment Guidelines link)
Left by Bernhard Häussner | Apr. 14, 2009 at 1:12pm
This would be the css:
don't show up, so I wonder if I can post HTML.
#wrapper {
position:absolute;
top:0;
left:0;
width:100%;
float:left;
height:100%;
}
#floater {float:left; height:50%; margin-bottom:-250px;}
#container {
border: 1px solid red;
height: 500px;
width: 600px;
background: yellow;
margin:0 auto;
clear:both;
position:relative;
}
using an empty div id="floater" after div id="wrapper"
With this, you cant display huge content in your centered div without having to worry that your content hides somewhere above or on the left of the page.
I hope your preview is broken, because tags like
Left by Bernhard Häussner | Apr. 14, 2009 at 1:40pm
Negative margins on your fixed width and fixed height div is a much easier and just as pure method. But, there are a lot of ways to skin a cat.
vertical:
http://www.how-to-css.com/css/how-to-center-your-page-with-css-vertically/
horizontal:
http://www.how-to-css.com/css/how-to-center-your-page-with-css/
Left by jason | Apr. 14, 2009 at 3:18pm
very useful tutorial,I have promoted the link of this article at my website www.webmasterclip.com
thanks
Left by Edward.H | Apr. 14, 2009 at 8:43pm
Isn't it easier to do it like this?
CSS
body {text-align:center;}
#wrapper {margin-left:auto; margin-right:auto; width:75%;}
HTML
<div id="wrapper">Content goes here.</div>
Left by Kristy | Apr. 15, 2009 at 1:54pm
The "margin: auto" trick works well for a block that is not absolutely positioned. In Paul's case, he was floating a block of content over an existing layer, so "margin: auto" would not work. But yes, if the block exists on its own, "margin: auto" works quite well.
Left by Mark at SC | Apr. 19, 2009 at 7:50am
Sorry Mark, it works. You'll only have to set the container of your box to an absolute position and 100% width. See my CSS above.
Left by Bernhard Häussner | Apr. 21, 2009 at 11:24am
Horizontally, yes, it does work as it's a relatively positioned container. Paul's CSS works quite well to center the content both horizontally and vertically.
There are many ways to accomplish tasks using CSS. Paul's example works well cross-browser with a minimal amount of markup. Of course, I might have gone with another color other than bright yellow!
Left by Mark at SC | Apr. 23, 2009 at 11:58am
This also works (and is a bit simpler):
CSS:
body {} /* i.e. text-align not needed */
#wrapper {margin-left:auto; margin-right:auto; width:500px;} /* the width is arbitrary */
HTML:
<div id="wrapper">Content goes here.</div>
Left by Steve Lawson | Jun. 22, 2009 at 10:14am
Nice, I am building some ajax systems, and one of my first doubts was about centering divs.
Thanks for publishing this tip!
Left by Daniel Schultz | Jul. 7, 2009 at 7:22am
After spending the last 90 minutes googling for "solutions" to horizontally center a DIV, I happened upon yours. While a few sites insist that "text-align:center;" is all that is needed (clearly wrong!), I found 12 or 15 that indicated that all that was needed was the "margin-left: auto; margin-auto: auto;", along with a specified width (either percentage or absolute) within the selector for the DIV to be centered. This technique did *NOT* work for IE7, FF3, or Chrome.
The important difference between those suggestions and yours is that YOURS WORKS! Now that I see the secret, it makes good sense. It's difficult to say how much time you saved me - I was about to give up by resigning myself to using deprecated techniques.
I've added your site to my delicious account and will check in frequently. Really great job!
Left by David Dozier | Jul. 26, 2009 at 3:55pm
I'm trying to get my divs to be centered using this method but I can't get it to work. I think my problem is with the code so could someone show me the code side of this fix?
Left by Taylor | Jul. 28, 2009 at 10:57am
David: I'm glad you were able to be helped out by this post. Thanks for the nod on delicious...
Taylor: there is a demo at the top of this page that will let you download an HTML file with all the necessary code. All HTML and CSS code is included in the file.
Left by Mark at SC | Jul. 28, 2009 at 7:08pm
Hi,
Can someone tell me how to just align to the bottom centre. Sorry simple question but its doing my headin.
Cheers
Left by Matt | Jan. 19, 2010 at 2:40pm
If you are trying to use the margin-left:auto; margin-right:auto; method and it is not working for you - check to make sure you are using the correct doc type:
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">
If you don't you will have issues and you'll spend hours trying to figure out why its not working (other doc types may work, I just know this one works for me)
Left by Brian Greenwood | Feb. 25, 2010 at 7:55pm
Leave a Comment