【 前端相关 网页布局 】探讨CSS3中 “垂直居中” 问题

理论知识 2017-01-30

[info]“44 年前我们就把人类送上月球了,但现在我们仍然无法在 CSS 中实现垂直居中。” —— James Anderson[/info]
[infobox title="难题"]
在 CSS 中对元素进行水平居中是非常简单的:如果它是一个行内元素,就对它的父元素应用 text-align: center;如果它是一个块级元素,就对它自身应用 margin: auto。然而如果要对一个元素进行垂直居中,可能光是想想就令人头皮发麻了。
多年以来,垂直居中已经成为了 CSS 领域的圣杯,它同样也是前端开发圈内广为流传的笑话。原因在于它同时具备以下几条特征。

  • 它是极其常见的需求。
  • 从理论上来看,它似乎极其简单。
  • 在实践中,它往往难如登天,当涉及尺寸不固定的元素时尤其如此。

[/infobox]
[infobox title="解决"]
下面用思维导图的方式为大家介绍“垂直居中”问题常见的解决方案:
[/infobox]
【 前端相关 网页布局 】探讨CSS3中 “垂直居中” 问题-屈兴东
[infobox title="下载"]
思维导图下载地址:
[/infobox]
[bdbtn]https://file.quxingdong.com/svg/vertically.svg[/bdbtn]

—— [ 文章最后编辑于:2017/03/04 ]

评论 (0)
    Top