Align div horizontally and vertically center to a page (responsive)

Question

I have a div for login form .I want to align the div horizontally and vertically centered in all devices.Any help is appreciated

margin: 0 auto; justify-content:center; position: absolute; top: 50%; left: 50%; — dockerrrr, Jul 24 '17 at 08:23
Now want happens is that in the mobile landscape view ,form and the footer overlaps.If a give a min-height form overlaps with header — dockerrrr, Jul 24 '17 at 08:24
Question already asked, see https://stackoverflow.com/questions/42187838/how-to-vertically-center-a-div-on-page/45110782#45110782 — Billu, Jul 24 '17 at 08:27

score 13 · Answer 1 · answered Jul 24 '17 at 08:29

13

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}

<div class="container">
  <form>
    <input type="text">
  </form>
</div>

answered Jul 24 '17 at 08:29

Gerard

15,418
5
30
52

1

I think this is better way than using `position: absolute`. Thank you. – Dumbo Feb 06 '18 at 14:07
sweet, simple, easy and perfectly working!!!!! – NickCoder Sep 11 '19 at 10:12
This should be the accepted answer – Cécile Fecherolle Apr 07 '20 at 14:27

score 1 · Answer 2 · answered Jul 24 '17 at 08:26

Try the following:

html body {
    height:100vh;
}

html body .login-box {
    width: 460px;
    height: 500px;
    margin: 0 auto;
    background: #000;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -230px;
    margin-top: -250px;
}

Please note the height and margin top is half of the height, Also the width is half of the margin left. in case you want to change the width and height of your div.

score 0 · Answer 3 · answered Jul 24 '17 at 08:37

0

How about this: https://jsfiddle.net/b7b954ox/1/

Your box must have width and height so you can use:

position: fixed; /* or absolute */
left: 0;
right: 0;
top: 0;
bottom: 0;

answered Jul 24 '17 at 08:37

Dejan Munjiza

790
1
12
23

Align div horizontally and vertically center to a page (responsive)

3 Answers3

Related