如何垂直居中divs？

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

我想问问，如何垂直对齐一个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与用户名和表格垂直对齐到中心？ 我试图说：

vertical-align: middle;

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

---

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

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

某些浏览器需要供应商前缀。 对于没有Flexbox支持的旧浏览器（例如IE 9及更低版本），您需要使用其中一种较旧的方法实施回退解决方案。

推荐阅读

浏览器支持

Flexbox指南

使用CSS灵活框

---

您可以垂直对齐另一个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在支持HTML5的最新（更新/当前版本）浏览器中受支持。

它可能无法在Internet Explorer中工作：P :)

总是尝试为任何垂直对齐的div（即innerDiv）定义高度以解决兼容性问题。

---

这可以通过3行CSS来完成，并且可以兼容（并且包括）IE9：

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

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

信用

链接地址: http://www.djcxy.com/p/7145.html

上一篇: How to vertically center divs?

下一篇: How to vertically center content with variable height within a div?