垂直居中任何元素

不！这绝不是黑魔法，真的可以垂直居中任何元素：

  1. html,
  2. body {
  3.   height: 100%;
  4.   margin: 0;
  5. }
  7. body {
  8.   -webkit-align-items: center;  
  9.   -ms-flex-align: center;  
  10.   align-items: center;
  11.   display: -webkit-flex;
  12.   display: flex;
  13. }

…還有CSS Grid:

  1. body {
  2.   display: grid;
  3.   height: 100vh;
  4.   margin: 0;
  5.   place-items: center center;
  6. }

这还不够？垂直方向，水平方向？任何元素，任何时间，任何地点？CSS-Tricks 有篇好文 讲到了各种居中的技巧。

注意： IE11 对 flexbox 的支持有点 bug。

演示