在写网站时，一个好的布局会直接影响到这个网站的好坏。而很多人刚刚学前端的人对CSS的布局都有一定的困惑，实际上的应用场景中，会由于多种原因而造成布局种类多而难以选择。现在我就说说自己对CSS布局的理解，分析下了解各种布局的优劣，如果有那些地方总结的不好，欢迎大家指正。
而水平居中的布局方式就是非常常见的一种，这种布局方式常常用于页面的头部、内容区、页脚，作用就是控制盒子在整个页面水平居中。
1.使用外边距margin：（盒子宽度） auto来实现
优势：兼容性好 劣势：需要对盒子指定一个宽度才行
2..使用inline-block和text-align来实现
先将元素变成行内块级元素 display:inline-block;
在讲元素居中 text-align:center;
优势：兼容性好 劣势：需要设置父子两个元素
3.使用绝对定位absolute来实现
使用绝对定位使元素实现水平居中的效果。这种布局方法一般有两种情况，一种是子容器无宽度时，另一种是子容器有宽度。
无宽度的子容器可以用一下代码，如果是有宽度，则可以设置margin-left负值为容器宽度的一半。
先给父级设置position:relative
在对需要居中的元素设置, position:absolute; left:50%; transform:transleteX(-50%);
优势：无需给元素设置宽度就可以居中，可以在移动端使用
劣势：兼容性比较差，需要IE9和以上的浏览器才能给支持
原文：http://www.cnblogs.com/qiu822/p/7142746.html