水平垂直居中
一个元素水平垂直居中在CSS布局中很常见，本文记录总结了水平垂直居中的一些方法，按照CSS布局中两大版块展开：块级元素内部布局、块级元素之间的布局。块级元素内部布局包括文本布局及盒模型自身布局，块级元素之间的布局包括脱离正常流及正常流中的元素。
对于文本
水平方向上使用 text-align: center; 来保证居中，将 line-height 值与 height 值设为相同的值保证垂直居中（单行文本可用）。
对于盒模型
设置 padding
将子元素的 padding 值设置为（父元素宽／高 - 子元素宽／高）／2，可将子元素填充至与父元素重合，视觉效果达到了水平垂直居中。
如果在 box-sizing: border-box; 的情况下，那父元素的 padding 值设为同上，也能达到水平垂直居中效果。
See the Pen center1 by stacyyy (@Stacyyy) on CodePen.
设置 margin
同理，为子元素设置 margin-left: auto; margin-right: auto; 进行填充，可以使其水平居中。这里不做示例。这种用法需要设置子元素宽度，当宽度未知时，可以用 CSS3 中的 fit-content 作为宽度值。至于上下外边距的取值和上面 padding 填充的取值同理。
对于 absolute 布局上下文
设置 top 和 left
See the Pen JNKwYp by stacyyy (@Stacyyy) on CodePen.
必须已知子元素的宽高设定对应的 margin 值。
使用 transform
对应的 CSS 换为
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
-webkit-transform:translate3d(-50%, -50%, 0);
可以得到如上图示例中的效果，该方法不需要知道子元素的宽高。关于 translate3d 属性的使用效果，可参照这里。
使用 text-align 影响 inline-block
See the Pen ybJGgg by stacyyy (@Stacyyy) on CodePen.
父元素设置的 text-align: center; 作用于匿名文本节点，当子元素设置 display: inline-block; 时会收到其影响，子元素左边与父元素中心对齐，所以需要设置 margin 来调整位置。将上图示例中的注释去掉则可看到子元素水平垂直居中效果。
使用相互冲突的定位和 margin: auto
当子元素有自己的宽高时，可以进行如下设置
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
可以实现水平垂直居中。实现原理为盒模型的宽度计算必须等于 padding 、margin 、width 、border 的总和。此时会平分 margin 以满足要求。
使用 flex 布局
将父元素设置 display: flex; ，子元素设置 margin: auto; 即可。该方法不要求父子元素有固定宽高。
关于 vertical-align
使用 vertical-align: middle; 需要有对齐的参照物时才会起作用。类似上文中提到的设置 display: inline-block; 时会生成隐匿文本节点，其所占据的行高可以为居中元素提供参照。类似的作用设置 line-height 或者 font-size 都可以达到。
参考资料
http://www.w3cplus.com/css3/a-visual-guide-to-css3-flexbox-properties.html