几种垂直居中的方法

  1. 如果父容器不固定高度，padding/line-height（慎用）即可实现元素的垂直居中
demo-1
demo-1
  1. 如果父容器固定高度
  • display:table-cell
demo-2
demo-2
  • display:inline-block; vertical-align:middle
demo-3
demo-3
  • position:absolute;top:50%;left:50%
    • margin-top:-1/2height; margin-left;-1/2width
    • transform:translate(-50%,-50%)
demo-4
demo-4
  • position:absolute;margin:auto;top:0;left:0;right:0;bottom:0;
demo-5
demo-5
  • display:flex;justify-content:center;align-items:center
demo-6
demo-6

完整demo

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

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1赞 92
  • 各种纯css图标
    各种纯css图标 CSS3可以实现很多漂亮的图形，我收集了32种图形，在下面列出。直接用CSS3画出这些图形，要比...
    剑残阅读 9,656评论 0赞 8
  • 如何实现元素的水平垂直居中
    收听音频,戳链接,旧号itclan已暂停使用,欢迎关注微信itclanCoder公众号可收听更多音频 前言 关于网...
    itclanCoder阅读 8,204评论 3赞 30
  • 这是我们的城市，这是城市之光
    新T微信号：Justee116 这是新T为您推荐的第10款T恤，由设计师丹迪(Dandy)设计。今天的主题是：城市...
    新T_Justee阅读 511评论 0赞 2
  • 小南国
    风儿，你是那无尽的海洋，可我觉得你是热的，道不进的话在看着你，可你能媚眼一笑吗？火儿啊，你那燃烧的空气是庄严的，没...
    我是一个文化人阅读 256评论 0赞 0