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

This question already has an answer here:

How to vertically center a div for all browsers? 41 answers

---

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.

---

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

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

---

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;

链接地址: http://www.djcxy.com/p/41498.html

上一篇: 如何将一个<div>垂直居中？

下一篇: 将div水平和垂直居中对齐页面（响应）