一、水平居中
1、文本、图片等行内元素的水平居中： 给父元素设置text-align:center;
2、确定宽度的块级元素的水平居中： magin:0 auto;
3、不确定宽度的块级元素的水平居中：
(1) 通过table来实现；
(2)块级元素display:inline;text-align:center;
(3)父元素设置float，position:relative;left:50%;子元素设置position:relative;left:-50%;
二、竖直居中
1、父元素高度不确定的文本、图片、块级元素的竖直居中： 给父容器设置相同的上下边距；
2、父元素高度确定的单行文本的竖直居中： 给父元素设置line-height值和父元素高度相同；
3、父元素高度确定的多行文本、图片、块级元素的竖直居中： vertical-align:middle;因为只对th、td有效，需加display:table-cell;
——摘录总结自《编写高质量代码（Ι）web前端开发修炼之道》