CSS：垂直对齐

Question

如何在不使用display table / table-cell或position absolute的情况下垂直对齐？

#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>

- George Adrian Echim

---

#parent { border: 1px solid red; height: 100vh; display: table; width: 100%; } .child { border: 1px solid blue; display: table-cell; text-align: center; vertical-align: middle; } - Rakib

Answer 1

这里是使用 "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

- Satheesh Kumar

---

我喜欢这个解决方案！@satheesh-kumar 你认为像grow-1、grow-2这样有不同子类来控制flex-grow是一个好主意吗？ - George Adrian Echim

Answer 2

你可以使用相对定位，将顶部设为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>

- dvr

---

这对多个子项如何起作用？我能让-50%更具动态性吗？ - George Adrian Echim

在这种情况下，您可以拥有一个包含多个子元素的容器，并对其应用翻译。 - dvr

Answer 3

另一种方法可能是使用浮动（floater）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>

- Ernesto Schiavo

Answer 4

你可以尝试使用 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>

- annasvst

Answer 5

你可以使用 display:flex;:

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

- razemauze

Answer 6

我想你可以这样使用

position: fixed; top: 50%;

- Diyavol Pasa

Answer 7

如果您不介意浏览器兼容性问题，我建议使用flex - 可以看看@rblarsen，@Satheesh Kumars的回答。

但是，如果您需要扩展浏览器支持，这里有一个更复杂但相当稳定的解决方案：已测试IE9+ FF Chrome和其他主要浏览器...

请查看这个示例：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;
}

附言 - 上述的translate解决方案虽然相当简单，但有时会导致渲染问题，请查看：

- user4602228