css – 如何垂直中心div？

我试图做一个小的用户名和密码输入框。

我想问，你如何垂直对齐一个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用户名和窗体的div垂直对齐到中心？我试图把：

vertical-align: middle;

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

解决方法

现代浏览器中的最佳方法是使用flexBox：

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

某些浏览器需要供应商前缀。对于没有flexBox支持的旧版浏览器(例如IE 9和更低版本)，您需要使用older methods之一来实施后备解决方案。

推荐阅读

> Browser support
> A Guide to Flexbox
> Using CSS Flexible Boxes