Vertical centering in CSS
Anyone one know any decent ways to center an element (a div, say) vertically in the page.
I know countless ugly, browser specific hacks. I was just wondering if there was a nice and proper css way to do this?
I'm talking about centreing in the veiwport really. e.g. like many lightbox implimentaions do. But with css not js...
All suggestions greatfull received
I've been trying to play with % units for height, but that simply seems to not do anything
Share: 
If you know the height of an element precisely in px or approximately in em, you can use position: absolute for this. Not tested:
| Code: |
| #foo {
top: 50%; margin-top: -5em; /* height is about 10em */ position: absolute; } |
Share:
I think you may need a
| Code: |
| display: table; |
Johan De Silva / Portfolio
Share:
Cheers
The
| Code: |
| display:table; |
I'm not a css guy realy, and had only ever use 'none', 'block' or 'inline' as values.
Will definately play with...
Share:
I think it is a popper CSS2 standard behavior however not implemented in anything less than IE8 so works in standard compliant browsers like IE8/FF3 etc... If you crack it with this you may need to conditional statement a new CSS file for IE6 and IE7 giving the top margin a fixed height. If you do it you will be one of the first to do it hack free without a table. However it is regretful that the majority of clients I am seeing still use IE6 
Johan De Silva / Portfolio
Share:
Have you tried the 'negative margin kludge' which Cerb mentioned?
You may also need to specify a height and/or min-height of 100% on the html, body selectors in order for the viewport to expand appropriately, but it should work - which is to say that I've used it numerous times before and know it to work in IE6/7 and all varieties of modern browsers.
See also: css dead center
Share:
Wonderful, thankyou, all.
Got enough new stuff to play with to keep me busy.
Cheers.
Will report back once finished playing.
Share:
| Johan007 wrote: |
| ...... However it is regretful that the majority of clients I am seeing still use IE6 |
About 8% IE6 (or IE6 compatible) on my company site. I am a bit surprised you have so many IE6 users. W3Schools stats suggest you are a bit unusual. What is your target audience?
Share:
June 2008 for Project Cerbera, according to AWstats:
| Code: |
| IE 7.0 507,679 36.8%
IE 6.0 403,898 29.3% Firefox 2.* 286,334 22.6% Firefox 3.0 34,993 2.5% Opera *.* 33,830 2.4% Safari *.* 25,162 1.8% IE 8.0 1,123 0.0% |
Share:
According to StatCounter for a small site that I look after:
Perc. Browser Name Version
38% MSIE 7.0
31% MSIE 6.0
20% Firefox 2.0.0
4% Firefox 3.0
3% Safari 1.2
2% Mozilla 5.0
1% MSIE 5.0
1% Opera 9.50
.
Share:
| Cerbera wrote: |
| .........Anyone looking forwards to supporting 3 Microsoft browsers, 2 Mozilla browsers, Opera 9.5 and the most recent/prevalent Safari? |
Must admit I have assumed that Firefox users will move pretty quickly across to FF3 - which is the only version of Ff I have on my computers.
For IE I presently have 5.01, 5.5, 6 and 7. Guess I'll ditch 5.x when I load IE8.
Share:
| kiwibrit wrote: |
| What is your target audience? |
Johan De Silva / Portfolio
Share:
Ah, I see, they check with IE6. FWIW, I use conditional statements to bring in styling sheets for IE6 and IE7 - and until recently checked that nothing major was broken in IE5.5. I run checks using them, as well as Opera, FF, and Safari.
Share:
| Bill Posters wrote: |
| See also: css dead center |
EDIT: This is now fixed when Quirks mode is disabled reducing the number of DIVs to 1
| kiwibrit wrote: |
| I use conditional statements to bring in styling sheets for IE6 and IE7 |
Johan De Silva / Portfolio
Share:
| Johan007 wrote: |
| EDIT: This is now fixed when Quirks mode is disabled reducing the number of DIVs to 1 |
Why wouldn't you be using standards-compliant mode in the first place?
I've been using nowt but Strict doctypes for years. Seems like common sense to me. Certainly makes my job easier by levelling the playing field as much as possible from the get-go.
Besides that, can't say I've ever had too much trouble with…
| Code: |
| html, body {
height: 100%; padding: 0; margin: 0; } #wrap { position: absolute; left: 50%; top: 50%; width: 700px; height: 400px; margin-left: -350px; /* minus half width */ margin-top: -200px; /* minus half height */ background: #ccc } |
Been a while since I used centering, but just did a quick check in FF, Saf, IE6, IE7 and it centers just fine.
Share: