Center div vertical, works fine with webkit but bug in firefox

Question

I have a problem centering div in Firefox, it seems to work fine in all webkit browsers, so I dont really know what I'm doing wrong:

My CSS:

html {
width: 100%;
height: 100%;
}

body {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
height: 100%;
width: 100%;
}

#Page {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}

#LoginBackground {
position: absolute;
margin-top: -45%;
margin-left: -35%;
left: 50%;
top: 50%;
width: 70%;
height: 90%;
}

My HTML:

<body>
<div id="Page">
<div id="LoginBackground">
</div>
</div>
</body>

Is this a bug within the Gecko engine or am I doing something wrong.

score 0 · Answer 1 · answered Apr 19 '12 at 17:58

0

Horizontal align works fine for me, vertical seems to be the problem, try this, maybe.

#loginBackground
{
top:0;
margin-top: 5%;
}

answered Apr 19 '12 at 17:58

mamadrood

739
5
12

didnt help. check out my example here [link](http://davidgreiner.dyndns.org/usocial/login.html) – David Greiner Apr 19 '12 at 18:07
Well, it works with top: 0 & margin-top 5%, but the footer goes over the red div, so you need to substract the footer height (10%) to your red div height. – mamadrood Apr 19 '12 at 18:11
Yeah I got you now. I think I will try a different approach. thanks tho – David Greiner Apr 19 '12 at 18:15

user1289347 · Accepted Answer · 2012-04-20T21:51:44.290

0

EDIT new fiddle http://jsfiddle.net/FsjNu/2/

html {
width: 100%;
height: 100%;
}

body {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
height: 100%;
width: 100%;
}

#Page {
position: relative;
width: 100%;
    height:100%;
}

#LoginBackground {
border: 1px solid red;
height: 90%;
left: 50%;
margin-left: -35%;
position: absolute;
top: 5%;
width: 70%;

}

<body>
<div id="Page">
<div id="LoginBackground">
</div>
</div>
</body>

edited Apr 20 '12 at 21:51

answered Apr 19 '12 at 18:01

user1289347

2,397
1
13
16

I dont think I provided enough information. Your answer is correct, but not enough for my problem. thanks tho – David Greiner Apr 19 '12 at 18:16

score 0 · Answer 3 · answered Apr 19 '12 at 18:04

0

use #page{ width:980px; margin:10px auto; } #LoginBackground{ margin:50px auto;
width:500px; }

answered Apr 19 '12 at 18:04

sohaan

637
1
10
18

I dont want a fixed width, the design should be liquid. – David Greiner Apr 19 '12 at 18:10
liquid as in what should it re size according to browser window or should its width depend on width of elements inside it – sohaan Apr 19 '12 at 18:17
resize with the browser window – David Greiner Apr 19 '12 at 18:19

Center div vertical, works fine with webkit but bug in firefox

3 Answers3