css水平居中的方法总结

(1)通过margin:0 auto;text-align:center;实现CSS水平居中；

(2)通过display:flex;justify-content:center;实现CSS水平居中；

(3)通过父元素position: relative;子元素position: absolute;left:50%;margin-left:子元素高度的一半；实现垂直居中；

(4)通过父元素position: relative;子元素position: absolute;left:50%;transform:translateX(-50%);实现垂直居中；

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 14,017评论 1赞 92
  • 如何实现元素的水平垂直居中
    收听音频,戳链接,旧号itclan已暂停使用,欢迎关注微信itclanCoder公众号可收听更多音频 前言 关于网...
    itclanCoder阅读 8,313评论 3赞 30
  • 盘点８种css实现垂直水平居中
    1.绝对定位居中技术 我们一直用margin:auto实现水平居中，而一直认为margin:auto不能实现垂直居...
    DecadeHeart阅读 1,652评论 0赞 3
  • 各种纯css图标
    各种纯css图标 CSS3可以实现很多漂亮的图形，我收集了32种图形，在下面列出。直接用CSS3画出这些图形，要比...
    剑残阅读 9,956评论 0赞 8
  • 我正在成为一只特立独行的猪
    对生活做种种设置是人特有的品性。不光是设置动物，也设置自己。很多人不喜欢自己的生活。但不喜欢又能怎么样？人也好，动...
    汪宠喵匠阅读 1,367评论 5赞 15

友情链接更多精彩内容