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

2018-06-14 14:09:22

这个问题在这里已经有了答案：

如何垂直居中所有浏览器的div？ 41个答案

尝试以下操作：

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;
}

请注意，高度和边距顶部是高度的一半，宽度也是剩余边距的一半。如果你想改变div的宽度和高度。

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

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

这个怎么样：https://jsfiddle.net/b7b954ox/1/

你的盒子必须有宽度和高度，所以你可以使用：

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

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

上一篇: Align div horizontally and vertically center to a page (responsive)

下一篇: How to center vertically div inside div