Page 216 - css揭秘

试一试 play.csssecrets.io/fluid-fixed

!
„ CSS 值与单位 如果屏幕的宽度比内容的宽度
http://w3.org/TR/css-values 相关规范 还要窄，这个解决方案所产生的效
果就是没有内边距！不过别急，我
们可以用媒体查询来修复这个问题。

40 垂直居中

难题

“44 年前我们就把人类送上月球了，但现在我们仍然无法在 CSS 中
实现垂直居中。”

——James Anderson（https://twitter.com/jsa/
status/358603820516917249）
在 CSS 中对元素进行水平居中是非常简单的：如果它是一个行内元素，
就对它的父元素应用 text-align: center；如果它是一个块级元素，就对
它自身应用 margin: auto。然而如果要对一个元素进行垂直居中，可能光
是想想就令人头皮发麻了。

1①
多年以来，垂直居中已经成为了 CSS 领域的圣杯 ，它同样也是前端开
发圈内广为流传的笑话。原因在于它同时具备以下几条特征。
„ 它是极其常见的需求。
„ 从理论上来看，它似乎极其简单。
„ 在实践中，它往往难如登天，当涉及尺寸不固定的元素时尤其如此。

① 比喻那些只存在于传说中的物件。——译者注

40 垂直居中 185

඀ࠡ JOEC