css实现水平居中的方法：1、使 用M arg in和text-align属性；2、通过“dis play :flex”；3、通过“display:table-cell”和mar gin -left；4、通过绝对定位；5、通过transform属性。
本教程操作环境：windows7系统、CSS3 && HT ML 5版、Dell G3 电 脑。
css实现水平居中
1、通过margin+text-align实现CSS水平居中。
这种方法是实现CSS水平居中最最常用的，我在前端开发中大概有60%的CSS水平居中就是通过“margin: 0 auto; text-align: center ”实现的。
2、通过display:flex实现CSS水平居中。
随着越来越多兼容 flexbox ，所以通过“display:flex”实现CSS水平居中的 方案 也越来越受青睐。
通过display:flex实现CSS水平居中的原理是父元素display:flex;flex-direction:column;而子元素align -s elf:center;
这个跟CSS垂直居中的原理是一样的，只是在flex-direction上有所差别，一个是row(默认值)，另外一个是column。
3、通过display:table-cell和margin-left实现CSS水平居中。
对于父元素和子元素的 宽 度都确定的情况，适合通过display:table-cell和margin-left实现CSS水平居中。
使用时，父元素display:table-cell，子元素给剩余宽度一 半 的margin-left。
4、通过绝对定位实现CSS水平居中。
这种方法跟上一个方法适用场景一样，也是适用于父元素和子元素的宽度都确定的情况。
使用时，父元素pos IT ion:absolute，子元素给剩余宽度一半的margin-left。
5 、通过transform实现CSS水平居中。
这种方法是最不推荐的方法，因为transform属性在各个浏览器中的表现行为不一致，所以会出现一些兼容性的问题，只有当已知用户浏览器时才推荐使用。
（学习视频分享：css视频教程）
以上就是css如何实现水平居中的详细内容，更多请关注其它相关 文章 ！
总结
以上是 为你收集整理的 css如何实现水平居中 全部内容，希望文章能够帮你解决 css如何实现水平居中 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。