请问如何垂直中心div？

Question

如何垂直中心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>

如何使div与id用户名和表单垂直对齐到中心？我试着说：

vertical-align: middle;

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

Answer 1

您可以在另一个div中垂直对齐div。看见这个关于JSFiddle的例子或者考虑下面的例子。HTML<div&nbsp;class="outerDiv"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="innerDiv">&nbsp;My&nbsp;Vertical&nbsp;Div&nbsp;</div></div>CSS.outerDiv&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;inline-flex;&nbsp;&nbsp;//&nbsp;<--&nbsp;This&nbsp;is&nbsp;responsible&nbsp;for&nbsp;vertical&nbsp;alignment &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;400px; &nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;red; &nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;white;}.innerDiv&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;margin:&nbsp;auto&nbsp;5px;&nbsp;&nbsp;&nbsp;//&nbsp;<--&nbsp;This&nbsp;is&nbsp;responsible&nbsp;for&nbsp;vertical&nbsp;alignment &nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;green;&nbsp;&nbsp;&nbsp;}这个.innerDiv页边距必须采用这种格式：margin: auto *px;[在哪里，*是你想要的价值。display: inline-flex在支持HTML 5的最新(更新/当前版本)浏览器中支持。它可能无法在InternetExplorer中工作：p：)始终尝试为任何垂直对齐的div(即innerdiv)定义一个高度，以解决兼容性问题。