当父元素和子元素内容都不定宽时，实现子元素水平、垂直居中的方法如下：
1、水平居中布局的四种方法：
.parent { position: relative; } .child { position: absolute; left: 50%; transform: translateX(-50%); }
.parent { display: flex; justify-content: center; }
.parent { text-align: center; } .child { display: inline-block; }
.child { display: table; margin: 0 auto; }
2、垂直居中的三种方法
.parent { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); }
.parent { display: flex; align-items: center; }
.parent { display: table-cell; vertical-align: middle; }
3、水平垂直居中
可以适当组合上述水平居中方法和垂直居中方法实现，此处不再赘述。
原文：http://www.cnblogs.com/liyan22/p/6547022.html