CSS垂直居中

平时工作中总是在用垂直居中的一些方法，却没有总结过，今天来总结一下（不考虑一些hack）:

参考《css揭秘》一书

• 如果是知道宽高的元素

  <div class="wrap">
    <div class="centered">
        Unknown stuff to be centered.
    </div>
  </div>

  .wrap {
    position: relative;
    height: 200px;
    background: blue;
  }
  .centered {
    height: 100px;
    width: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -100px;
    /* 也可以换成 transform */
    /* transform: translate(-50%, -50%); */
    background: red;
  }
/* 或者借助calc函数，省去两行 */
  /* .centered {
    height: 100px;
    width: 200px;
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 100px);
    background: red;
  } */

• 不定高的元素

<div class="wrap">
    <div class="centered">
        Unknown stuff to be centered.
    </div>
</div>

/* 一、使用translate，主要是因为translate的两个参数相对的是自身的宽高 */
.wrap {
    position: relative;
    height: 200px;
    background: blue;
  }
.centered{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: red;
}
/* 二、使用table布局 */
  .wrap {
    display: table;
    width: 100%;
    height: 200px;
  }
  .centered {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
/* 三、flex布局 - 最佳解决方案，现在的兼容性也很好了 */
.wrap {
    position: relative;
    height: 200px;
    background: blue;
    display: flex;
  }
  .centered {
    margin: auto;
    background: red;
  }

当我们使用 Flexbox 时，margin: auto 不仅在水平方向上将元素居中，垂直方向上也是如此。甚至不需要指定任何宽度（当然，如果需要的话，也是可以指定的）：这个居中元素分配到的宽度等于 max content。

Flexbox 的另一个好处在于，它可以将匿名容器（即没有被标签包裹的文本节点）垂直居中。举个例子，假设我们的结构代码是：<main>Center me, please!</main>。
我们先给这个 main 元素指定一个固定的尺寸，然后借助 Flexbox 规范所引入的 align-items 和 justify-content 属性，我们可以让它内部的文本也实现居中：

main {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18em;
  height: 10em; 
}