Vertically Center In Browser
- Started
- Last post
- 19 Responses
- scdoody
Anyone have links to code that would center a div vertically in the browser - regardless of screen size?
Cheers
- cosmo0
margin: auto;
- mg330
For some reason I have seen examples and typically use:
margin-right: auto;
margin-left: auto;Can't remember why, perhaps certain browsers interpret it better that way.
- cosmo0
it's pretty much the same thing. so you had it right.
margin-right: auto;
margin-left: auto;or
margin: 0px auto 0px auto;
or
margin: auto; --> simple.
- scdoody0
Doing margin:auto; successfully centers in horizontally - but I'm looking for a solution that will center the DIV vertically.
Anyone?
- hiten0
vertical: auto
- hiten0
i typed that hit broadcast...then got an overwhelming feeling of guilt....im sorry. I was being mean, that wont work.
- PonyBoy0
*mocks cosmo
- kern_0
div.name {
position: absolute;
height: 400px;
top: 50%;
margin-top: -200px;
}
- jaylarson0
i don't think centering anything vertically with CSS is currently possible. : (
- scdoody0
So would the best non CSS solution be to create a 1x1 table and valign the div to the middle of the td ?
- kern_0
ummm do what i just said
- blackspade0
check it:
http://www.wpdfd.com/editorial/t…had that one bookmarked for a bit
- kern_0
ignore me much?
- Witt0
div.height: 50%
you.scumbags: bold
enough: enough.
jesus:align-top.
holy.macaroni: float-left;
- kern_0
Warning: Cannot handle Witt.gayness - headers already
sent by (output started at homo.php:6) in
veryhomo.php on line 69
- mocaloca0
funny you ask, I spent over an hour yesterday screwing and searching about this:
http://www.jakpsatweb.cz/css/css…
and this is a perfect example why I hate to develop with css and will continue to work with Flash.
I very very much admire the works and those who can actually place their good design exactly where they want and make it look good on every browser. Just not for me...
- vwsung18t0
why is everyone ignoring kern he got it right
- Witt0
lol @ kern_
- rafalski0
css creators were dumb design ignorants and the idea of vertical centering the whole site never came to their small minds. The only html element which content can be vertically centered is table cell, TD (TH prolly too).
You can assign table cell behaviour to elements though:
html {height:100%; display:table}
body {display:table-cell; vertical-align:middle;}Note that this stupid code doesn't work in IE, as it doesn't understand display:table nor display:table-cell, hahahaha..
Other ways to center require you to know the element height, which is not always an acceptable solution