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

Question

我有登录表格的div。我想在所有设备中水平和垂直居中对齐div。感谢任何帮助

Answer 1

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试以下方法：

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的宽度和高度。

Answer 3

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

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

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