html - CSS:垂直对齐

Question

如何在不使用显示表格/表格单元格或绝对位置的情况下垂直对齐？

#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

这是另一个使用“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