如何将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;

在CSS中用于ID为Login的div，但似乎不起作用。任何帮助，将不胜感激。

Answer 1

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

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

某些浏览器将需要供应商前缀。对于不支持Flexbox的较旧的浏览器（例如IE9及更低版本），您需要使用较旧的方法之一实施后备解决方案。