-1

I would like to centre .login inside body. Currently everything looks as desired, however if I inspect it, I can see that is not actually in body's area:

enter image description here

I could resolve it with:

.login {
 position: absolute;
 width: 100%;
 height: 100%;
}

But that will break the body. How do I fix this while keeping the element in the normal work flow?

jaunt
  • 4,978
  • 4
  • 33
  • 54
user98293989823
  • 99
  • 8
  • Post a complete code example in your question please. – j08691 Sep 26 '15 at 19:00
  • Anyway, I guess the accepted answer is acceptable but the final result's still turdish. Unless you really need archaic browser support, I'd go with something like this : http://codepen.io/anon/pen/yYVgQB?editors=010. – Shikkediel Sep 26 '15 at 21:27
  • Flexbox is good for centering vertically and horizontally: http://stackoverflow.com/a/33049198/3597276 – Michael Benjamin Mar 19 '16 at 13:03

3 Answers3

1

Does this solve your problem?

html,body,.login{
  height:100%;
  margin:0;
}

The reason height:100% does not work without position: absolute; is because the parent of .login does not have 100% of the page. It would only have 100% the height of body which is very small: it acts as the same way default position:static does. This answer gives slightly more detail .

Community
  • 1
  • 1
jaunt
  • 4,978
  • 4
  • 33
  • 54
1

Add this to your code:

html, body { height: 100%; }
.login { height: 100%; }
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
0

You dont need to use position:absolute, Use margin:0 auto instead of it

.login {
   width: 360px;
   margin:0 auto;
}
Ali Mehdi
  • 884
  • 1
  • 11
  • 33
  • Not using absolute positioning at all is a much better answer. – Shikkediel Sep 26 '15 at 19:22
  • @Shikkediel, none of the answers posted here use position absolute. But this is the only answer that *doesn't* solve the problem. demo: http://codepen.io/anon/pen/EVNZPY – Michael Benjamin Sep 26 '15 at 19:26
  • That's because the superfluous style on `.login_box` hasn't been removed. – Shikkediel Sep 26 '15 at 19:29
  • Understood. But I don't see how this answer addresses that code, which wasn't the referenced `position: absolute` in the question. If this answer was referring to your `.login_box` rule, it should be explained in the answer. – Michael Benjamin Sep 26 '15 at 19:31
  • And i want center in the vertically and horizontally, so i cant use margin 0 auto. – user98293989823 Sep 26 '15 at 19:54
  • Agreed the post isn't very explanatory but '*dont need to use position:absolute*' was a key phrase I didn't see elsewhere (to me it included the conclusion I had drawn about `.login-box`). The need for vertical centering had escaped me, don't think there's a way around absolute positioning there. But a slicker approach, yes. – Shikkediel Sep 26 '15 at 20:51