将 div 水平和垂直居中对齐到页面（响应式）[重复]答案

【问题标题】：Align div horizontally and vertically center to a page (responsive) [duplicate]将 div 水平和垂直居中对齐到页面（响应式）[重复]
【发布时间】：2017-12-29 17:43:52
【问题描述】：

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

【问题讨论】：

向我们展示您迄今为止的尝试
边距：0 自动；证明内容：中心；位置：绝对；最高：50%；左：50%；
现在想要发生的是，在移动横向视图中，表单和页脚重叠。如果给定的最小高度表单与页眉重叠
已提出问题，请参阅stackoverflow.com/questions/42187838/…

标签： css

【解决方案1】：

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

你的盒子必须有宽度和高度，这样你才能使用：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

我认为这比使用position: absolute 更好。谢谢。
甜美、简单、轻松且完美运行！！！！！
这应该是公认的答案

【解决方案3】：

尝试以下方法：

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

【讨论】：