CSS: 垂直对齐

Question

如何在不使用显示 table/table-cell 或绝对位置的情况下垂直对齐？

#parent {
  border: 1px solid red;
  height: 100vh;
}

.child {
  border: 1px solid blue;
}

<div id="parent">
  <div class="child">
    <p>I want to be vertical aligned</p>
  </div>
</div>

Answer 1

您可以使用相对位置，顶部为 50%，平移为 -50%。

#parent {
  border: 1px solid red;
  height: 100vh;
}

.child {
  position: relative;
  top: 50%;
  transform: translate(0,-50%);
  border: 1px solid blue;
}

<div id="parent">
  <div class="child">
    <p>I want to be vertical aligned</p>
  </div>
</div>

Answer 2

您可以使用 display:flex;:

#parent {
  border: 1px solid red;
  height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

Answer 3

另一种方法可能是使用漂浮物 div

#parent {
  border: 1px solid red;
  height: 100vh;
}
.floater {
    float:left;
    height:50%;
    width:100%;
    margin-bottom: -25px;
}
.child {
  border: 1px solid blue;
  clear: both;
  height:50px;
}

<div id="parent">
  <div class="floater"></div>
  <div class="child">
    <p>I want to be vertical aligned</p>
  </div>
</div>

Answer 4

我觉得你可以这样用

position: fixed; top: 50%;

Answer 5

这是另一个使用 "Flex" 属性的选项。

<div id="parent">
  <div class="child">
    <p>I want to be vertical aligned</p>
  </div>
</div>

#parent {
  border: 1px solid red;
  display: flex;
  align-items: center;
  height: 100vh;
}

.child {
  border: 1px solid blue;
  flex-grow: 1;
}

Codepen demo link

Answer 6

如果您不介意浏览器兼容性，我会选择 flex - 请参阅@rblarsen、@Satheesh Kumars 的回答。

但如果您需要扩展浏览器支持，这里有一个更复杂但更可靠的解决方案：经过测试的 IE9+ FF Chrome 和其他主要浏览器...

看看这个 fiddle：https://jsfiddle.net/kLLz0nm2/

HTML

<div class="wrapper">
   <div class="content">Middle aligned</div>
   <div class="middle"></div>
</div>

CSS

.wrapper{
   width : 100%;
   height : 100%;
   text-align: center;
}

.content{
   display: inline-block;
   vertical-align: middle;
}

.middle{
   height: 100%;
   display: inline-block;
   vertical-align: middle;
}

P.S - 上述 translate 解决方案虽然相当简单，但有时会导致渲染效果不佳，请查看：

Answer 7

您可以尝试使用 display:flex。
CSS

#parent {
  border: 1px solid red;
  height: 100vh;
  display: flex;
  align-items: center;     /* vertical */
  justify-content: center; /* horizontal */
}

.child {
  border: 1px solid blue;
}

<div id="parent">
  <div class="child">
    <p>I want to be vertical aligned</p>
  </div>
</div>

CSS: 垂直对齐

CSS: Vertical-align

html

css

vertical-alignment

HTML

CSS