10 Apr
How to Center a Div
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%;
}If this post was helpful to you please help pass the word by liking it, thanks all!
Coding Techniques, CSS
by Paul Sayre | 4/10/2009 1:23pm
by Paul Sayre | 4/10/2009 1:23pm
It would be nice just to use 'margin: auto;' to centre div's.
Left by Benjamin Reid | Apr 14, 2009
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
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
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
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
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
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
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 Neidlinger | Apr 19, 2009
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
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 Neidlinger | Apr 23, 2009
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
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
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
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
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 Neidlinger | Jul 28, 2009
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
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
Great post, thank you for sharing this, I too get massive headaches with divs not centering but this looks like a great sollution. :)
Left by Jason | Mar 31, 2010
Excellent! Thanks very much for this post -- the original author's solution works perfectly.
Some tips for your readers:
1. Two borders appear, one in the upper left corner. To fix this, remove the border property from #wrapper and only apply it to your #container section
2. When writing your HTML to go along with his CSS code, the #container DIV belongs nested inside of the #wrapper and not the other way around.
Anyways, hope it helps... Thanks again for this blog post, you saved the day.
Left by Howard Payne | Oct 6, 2010
Does anyone know how to do this for Chrome?
Left by Kimberly | Oct 22, 2010
I have complex issues with centering DIVs. I finally managed to place multiple div cells one near the other and one under the other, they way I wanted...
None of them are centered.
My problem is that when I try to center them with align="center", then it centers all text inside all divs, but the divs stay at the same place: to the left... because I am using floats as well and a number of other commands etc.
Thank you for sharing this, perhaps I will understand and use with my sites :)
Left by Calvin H. | Oct 31, 2010
Wow -- THANKS!! :D
A pet peeve of mine with CSS is how some of the most basic necessities are cryptic and/or impossible to do, and burn up endless hours of scavenging for answers (most of which end up not working). And for the CSS Purists out there: it doesn't matter whose fault it is, it's just plain LAME that these things weren't done properly from Day One and/or corrected as fast as possible! End of mini-rant... ;)
So thanks for saving my sanity with something so basic. I had to resort to table-based layout to get this to work properly cross-browser before, and now I don't have to anymore! (hey, that rhymes!)
I've tested it with IETester (IE 5, 6, 7, 8) and it passes just fine. Also the latest FF and Safari work great. Sweet! :D
Now I did use the version from the demo code, not that listed on the top of this page, so perhaps this is causing some people problems? The only thing I changed was putting the outline only in the #container, so here's the final CSS I used:
#wrapper, #container {
height: 500px;
width: 600px;
}
#wrapper {
bottom: 50%;
right: 50%;
position: absolute;
}
#container {
border: 1px solid red;
background: yellow;
left: 50%;
padding: 10px;
position: relative;
top: 50%;
}
Left by Waca | Dec 27, 2010
I found this solutions to be very elegant and effective:
http://www.thesitewizard.com/css/center-div-block.shtml
The trick to centering a block in CSS is to do the following:
1. Specify a width for the DIV block.
2. Set both its left and right margins to auto.
Both steps are necessary -- that is, you cannot just set the margins to auto without specifying the width of the block and expect this method to work. The technique works because when both margins are set to auto, web browsers are required by the CSS standard to give them equal width."
Left by Jeffry Pilcher | Feb 8, 2011