第 70 期(W3C 标准-CSS-布局排版)：不定高垂直居中

不定高垂直居中对齐，即没有固定高度的子元素在父容器里垂直居中对齐。

.parent {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
}

.child {background: #fd0;}

<div class="parent">
  <div class="child">The quick brown fox jumps over the lazy dog.</div>
</div>

解决方案：

/* 方法1 */
.child {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

/* 方法2 */
.parent {
  display: flex;
  align-items: center;
}

/* 方法3 */
.parent {
  display: table-cell;
  vertical-align: middle;
}

Navigation Menu