请问如何垂直中心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 class="outerDiv">
    <div class="innerDiv"> My Vertical Div </div></div>

CSS

.outerDiv {
    display: inline-flex;  // <-- This is responsible for vertical alignment
    height: 400px;
    background-color: red;
    color: white;}.innerDiv {
    margin: auto 5px;   // <-- This is responsible for vertical alignment
    background-color: green;   }

这个.innerDiv页边距必须采用这种格式：margin: auto *px;

[在哪里，*是你想要的价值。

display: inline-flex在支持HTML 5的最新(更新/当前版本)浏览器中支持。

它可能无法在InternetExplorer中工作：p：)

始终尝试为任何垂直对齐的div(即innerdiv)定义一个高度，以解决兼容性问题。