URL: http://www.wpdfd.com/editorial/thebox/deadcentre4.html
Taken from Dead Centre. Adjust #content depending on the size div you need.
Expand |
Embed | Plain Text
Comments
Subscribe to comments
You need to login to post a comment.
i have a better way that doesn't depend on the width. put a DIV inside a DIV. first DIV is "position:fixed/absolute", the inner one is "margin:0 auto".
anyway, this is good for things with known HEIGHT, cause you need to calculate and cut by half..
Centering a div is a lot less complicated than this. Simply apply a fixed width to your div i.e div { width: 740px; } and add margin: auto; That's it!
div { width: 740px; margin: auto; }
I think it's a way of centering something in the exact middle of a browser window, as opposed to just a center column. Like a picture. Dead center in the middle of your window. Something that was really easy to do with tables. Before they were outlawed...
@neal_grosskopf: sorry dude - that doesn't work. will centre horizontally but not vertically. I've seen this kind of solution before, and while it's clunky, there really is no better way to centre something vertically on the screen in CSS, regardless of the screen height (unless you start messing around with javascript like we used to do back in '99)
Thanks this was very useful. I think IE sucks when it comes to DIV's, but there are work arounds for most things.
Anyway thanks again! eCommerce Blog
There's actually a more efficient way of doing this.
Check this blog post http://perishablepress.com/press/2007/09/25/absolute-horizontal-and-vertical-centering-via-css/
That was a lot of css for such a simple thing...
Here's the shortest line of codefix:
deadCenter {
i agree with fsn.
margin-left is negative the width (800 width would result in -400, 900 width would result in -450) margin-top is negative the height (800 height would result in -400)
There was a decent article yesterday on Smashsing Magazine about this http://www.smashingmagazine.com/2009/10/05/mastering-css-coding-getting-started/#CSS-Basics3
...why not just use 'margin: 0 auto;'. This would be a much simpler way, with less CSS coding.
or even "margin: auto;" if you wanted it centered vertically and horizontally.
the most common rule i use to center divs horizantally is :
div.mydiv{ width:700px; /an example/ margin:0 auto; }
yeah this one's old style
@jech, do not call it old style. Call it old school, like the cool kids :)
Why not these 3 rows?
You should always use margin: 0 auto; to center a div. Using position: absolute; removes your div from the flow of your page, and you will have to use weird margins to position the other divs around it, this snippets of codes will cause alot more trouble for new comers than good.