前言
一直对CSS布局一知半解，这段时间打算定下心来好好学习一下，于是先从最简单的水平居中布局开始入手。下面以分页组件为实例来记录各种实现方式。
common.css
宽度固定时
1. display:block + margin: 0 auto
HTML Markup
CSS
兼容性：All browser!
2. display:block + <center></center>
HTML Markup
CSS
兼容性：All browser!
HTML5 不支持 <center> 标签，HTML 4.01 已废弃 <center> 标签优点： 当元素宽度固定，无需根据其内容/子元素变化时，原理和实现十分简单高效。
缺点：当元素宽度需根据其内容/子元素变化时（该元素及其子元素的font变化也会导致该元素的宽度变化）。宽度自适应时
对于non-replaced element而言
1. display:table + <center></center>
HTML Markup
CSS
兼容性：All browser!
HTML5 不支持 <center> 标签，HTML 4.01 已废弃 <center> 标签
2. display:table + margin: 0 auto
HTML Markup
CSS
兼容性：IE8+
若子元素间无间隔时，可将 .navbar li{ float:left;} 改为 .navbar li{display:table-cell;}
3. display:block + margin: 0 auto + width:fit-content
HTML Markup
CSS
兼容性：No IE
fit-content是CSS3中width的新增属性值，表示容器元素宽度自适应子元素。
4. text-align:center + display:inline-block
HTML Markup
CSS
兼容性：IE8+
通过CSShack可兼容IE6/7.navbar{ *display: inline; zoom: 1;} 注意：容器元素设置为display:inline-block时，会被设置为float的子元素撑大。
5. float:left + position:relative
HTML Markup
CSS
兼容性：For all browser!
6. position:absolute + position:relative
HTML Markup
CSS
兼容性：For all browser!
7. float:left + transform:translate(-50%,0)
HTML Markup
CSS
兼容性：IE9+
8. display:box
HTML Markup
CSS
兼容性：IE10+
9. text-align:center + display:inline-box
HTML Markup
CSS
兼容性：IE10+
对于replaced element而言
直接采用 display:block + margin: 0 auto 即可。
HTML Markup
CSS
总结
尊重原创，转载请注明来自：^_^肥子John
感谢
http://www.456bereastreet.com/archive/201303/how_to_shrinkwrap_and_center_elements_horizontally/http://www.w3cplus.com/css/elements-horizontally-center-with-css.htmlhttp://zxc0328.github.io/2015/05/21/centering-all-the-directions/