css水平垂直居中问题

问题一：盒子在文档流中居中

方法一：绝对定位-宽高的一半


方法二：绝对定位+margin:auto;


方法三、用transform实现


问题二：盒子在盒子中水平垂直居中

方法一：用最简单的margin: 0 auto; 实现


方法二：用绝对定位实现 / 相对定位


方法三：弹性盒子配合 margin:auto;


方法四：display:table-cell;


方法五：display:grid;


方法六：vertical-align:middle;   display:inline-block;


©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1赞 92
  • Css 布局 -
    1. 前言 前端圈有个“梗”：在面试时，问个css的position属性能刷掉一半人，其中不乏工作四五年的同学。在...
    YjWorld阅读 4,538评论 5赞 15
  • 如何实现元素的水平垂直居中
    收听音频,戳链接,旧号itclan已暂停使用,欢迎关注微信itclanCoder公众号可收听更多音频 前言 关于网...
    itclanCoder阅读 8,210评论 3赞 30
  • #!/usr/bin/python3 和 #!/usr/bin/env python3 的作用
    在 Python 脚本的第一行经常见到这样的注释:#!/usr/bin/env python3或者#!/usr/b...
    patiencing阅读 40,188评论 2赞 42
  • 她并不温暖
    真的，你看。我真的是个骨子里悲观消极的人。你看我做的这些花里胡哨积极向上的事。如果说黑暗里的光明让人感动，那这光明...
    生姜27阅读 107评论 0赞 0