前言
一直对CSS布局一知半解，这段时间打算定下心来好好学习一下，于是先从最简单的水平居中布局开始入手。下面以分页组件为实例来记录各种实现方式。
common.css
目标元素宽度固定时
1. display:block + margin: 0 auto
HTML Markup
CSS
兼容性：All browser!
采用盒模型本身的margin来布局不会引起reflow。
2. display:block + <center></center>
HTML Markup
CSS
兼容性：All browser!
HTML5 不支持 <center> 标签，HTML 4.01 已废弃 <center> 标签优点： 当元素宽度固定，无需根据其内容/子元素变化时，原理和实现十分简单高效。
缺点：当元素宽度需根据其内容/子元素变化时（该元素及其子元素的font变化也会导致该元素的宽度变化）。 3. 若父元素和目标元素宽度均固定时，可采用盒模型自身的padding来布局HTML Markup
CSS
目标元素宽度自适应时
对于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
奇技淫招
既然replaced element实现宽度自适应居中如此简单，那我们可否以replaced element为容器包裹目标元素呢？这时我们将目光投到button标签了:)
HTML Markup
CSS
虽然采用button作为壳实现水平居中代码简单，但会引发其他问题：
1. button不会继承父节点的样式，需作样式重置——导致CSS片段重复；
2. 在IE下button内的a元素样式全丢，且点击时不会打开新网页，需要通过click事件处理button内元素的点击操作；
3. 在IE下需要通过οnmοusedοwn="return false"来清除点击时button整体元素的样式变化。
总结
尊重原创，转载请注明来自：^_^肥子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/http://f2e.souche.com/blog/jie-du-cssbu-ju-zhi-shui-ping-chui-zhi-ju-zhong/