更新：可直接访问 [CSS/CSS3 如何实现元素水平居中] 查看效果，右键查看源代码

-------------------------------------------------分割线---------------------------------------------

先上效果图

图中链接：inline-block元素之间存在空白间距

图中链接：Horizontally Centered Menus with no CSS hacks

实现代码：

	
	


CSS 如何实现元素水平居中

1.margin:auto实现水平居中
缺点：必须设置固定宽度


	



2.text-align+inline-block实现水平居中
缺点：inline-block元素之间存在空白间距


	

		
	


3.通过设置float + text-align + display:inline;实现水平居中
缺点：原理稍复杂，需额外增加一个元素做嵌套
参考：Horizontally Centered Menus with no CSS hacks


	

		
float...自适应宽度
	


4.绝对定位实现水平居中
缺点：必须设置固定宽度


	


解决之道：结合方法3实现自适应宽度


	

		
绝对定位自适应宽度
	


CSS3 如何实现元素水平居中

5.flex实现水平居中
缺点：兼容性差


	
自适应宽度


6.width:fit-content; + margin:0 auto;实现水平居中
缺点：兼容性差


	
fit-content自适应宽度

---------------------------------------------------------参考资料------------------------------------------------------------------

如何只用CSS做到完全居中

六种实现元素水平居中

CSS制作水平垂直居中对齐