如何使用 CSS 在父元素内垂直居中 <div>？

Question

我正在尝试制作一个小的用户名和密码输入框。

我想问一下，你如何垂直对齐一个div？

我所拥有的是：

 <div id="Login" class="BlackStrip floatright">
   <div id="Username" class="floatleft">Username<br>Password</div>
   <div id="Form" class="floatleft">
   <form action="" method="post">
      <input type="text" border="0"><br>
      <input type="password" border="0">
   </form>
   </div>
</div>

如何使具有 id Username 和 Form 的 div 垂直对齐到中心？我试着说：

 vertical-align: middle;

在 id 为登录的 div 的 CSS 中，但它似乎不起作用。任何帮助，将不胜感激。

原文由 Crays 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

现代浏览器中最好的方法是使用 flexbox：

 #Login {
    display: flex;
    align-items: center;
}

一些浏览器需要供应商前缀。对于不支持 flexbox 的旧浏览器（例如 IE 9 和更低版本），您需要使用其中一种 旧方法 来实现后备解决方案。

推荐阅读

• 浏览器支持
• Flexbox 指南
• 使用 CSS 灵活框

原文由 Andy E 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这可以用 3 行 CSS 完成，并且兼容回（包括）IE9：

 .element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

示例：http: //jsfiddle.net/cas07zq8/

信用

原文由 patmood 发布，翻译遵循 CC BY-SA 3.0 许可协议