看似簡單的居中，不知道難住過多少人，特別是不同元素的居中，絕對不是一句center就能解決的，上圖所示的居中就是一種萬能居中，可以垂直上下左右統統居中，不！這絕不是黑魔法，真的可以垂直居中任何元素：

html, body {  height: 100%;  margin: 0;
}body {  -webkit-align-items: center;  
  -ms-flex-align: center;  
  align-items: center;  display: -webkit-flex;  display: flex;
}

上圖所示的居中演示代碼如下：

HTML演示代碼：

<div class="container">
  <h1>Vertically-Center Anything!</h1>
</div>

CSS：

html, body {
  height: 100%;
  margin: 0;
}
body {
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background: #03a9f4;
  display: -webkit-flex;
  display: flex;
  font-family: "Bitter", serif;
}
.container {
  margin: 0 auto;
}
h1 {
  color: #fff;
  font-size: 2.5em;
  text-shadow: 3px 2px 0 #03a9f4, 6px 5px 0 rgba(0, 0, 0, .15);
}

這還不夠？垂直方向，水平方向？任何元素，任何時間，任何地點？CSS-Tricks 有篇好文 講到了各種居中的技巧。

注意：IE11 對 flexbox 的支持有點 bug。

以后也會陸續分享各種居中問題。