[ 面试系列 ] - 五：如何垂直居中？这个问题比较直接，并不需要延伸太多，直接从实现的角度回答即可。以下例举工作中常

系列文章

说在前面的

这个问题比较直接，并不需要延伸太多，直接从实现的角度回答即可。

以下例举工作中常用到的垂直居中方案。（以个人使用频率为优先级排序）

flex（弹性盒模型）

不得不说，不考虑兼容性的情况下，flex 真的非常好用，有兴趣的同学可以看看向军老师的呀！被闪电击中了，CSS3 FLEX 弹性盒模型让布局飞起来。（看这标题就知道向军老师是个幽默风趣的人，其内容也是干货满满）

通过 flex 实现垂直居中常用的有两种方案，实现如下：

/* 默认主轴 */
.container {
  display: flex;
  align-items: center;
}

/* 主轴 -> y */
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

absolute（绝对定位）

事实上，像是 float，absolute 这类会破坏文档流的危险属性，尽量少用为妙。

通过 absolute 实现垂直居中常用的有四种方案，实现如下：

.futher {
  width: 300px;
  height: 300px;
  position: relative;
}

/* [1]: 最常用，不过兼容性相对较差 */
.child {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

/* [2]: 需要知道子元素的高 */
.child {
  height: 100px;
  position: absolute;
  top: 50%;
  margin: -50px 0 0 0;
}

/* [3]: 与 [2] 相比好处在于可以通过百分比确定子元素高 */
.child {
  height: 50%;
  position: absolute;
  top: 50%;
  margin: -25% 0 0 0;
}

/* [4]: 子元素高度可以是百分比，也可以是一个确定的值 */
.childs {
  height: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

grid（栅格布局）

grid 其实用在垂直居中这种地方并不是非常合适，有种杀鸡焉用牛刀的感觉。当然，这也是一个非常强大的布局，同样，感兴趣的同学可以看看向军老师的像开法拉利一样写CSS3 ，程序员来体验未来的CSS3布局方式，GRID 栅格系统真香。

用在此处，仅仅需要两个空 div 辅助即可：

<div class="grid-container">
  <div class="placeholder"></div>
  <div class="center"></div>
  <div class="placeholder"></div>
</div>

<style>
.grid-container {
  width: 300px;
  height: 300px;
  display: grid;
}
</style>

需要注意，这种居中方式，是将父容器等分成三块，content 置于中间那块实现的。

设置第三方基准

这个方法的实现原理就是通过一个高度等于父元素一半的辅助元素，将想要居中的子元素顶到对应位置去。需要注意的是，将子元素移动的方式可以使用 margin 负值，也可以使用 transform

<div class="grid-container">
  <div class="placeholder"></div>
  <div class="center"></div>
</div>

<style>
.container {
  width: 300px;
  height: 300px;
}

.placeholder {
  height: 50%;
}

.center {
  height: 100px;
  margin: -50px;
}
</style>