Page 218 - css揭秘

left: calc(50% - 9em);
width: 18em;
height: 6em;
}

显然，这个方法最大的局限在于它要求元素的宽高是固定的。在通常情
况下，对那些需要居中的元素来说，其尺寸往往是由其内容来决定的。如果
能找到一个属性的百分比值以元素自身的宽高作为解析基准，那我们的难题
就迎刃而解了！遗憾的是，对于绝大多数 CSS 属性（包括 margin）来说，
百分比都是以其父元素的尺寸为基准进行解析的。
CSS 领域有一个很常见的现象，真正的解决方案往往来自于我们最
意想不到的地方。在这个例子中，答案来自于 CSS 变形属性。当我们在
translate() 变形函数中使用百分比值时，是以这个元素自身的宽度和高度
为基准进行换算和移动的，而这正是我们所需要的。接下来，只要换用基于
百分比的 CSS 变形来对元素进行偏移，就不需要在偏移量中把元素的尺寸
写死了。这样我们就可以彻底解除对固定尺寸的依赖：

main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

你可以在图 7-18 中看到结果：这个容器已经完美居中了，完全满足我 图 7-18
们的期望。 利用这个 CSS 变形技巧，我们可
以让宽高不固定的元素垂直居中
当然，没有任何技巧是十全十美的，上面这个方法也有一些需要注意的地方。

„ 我们有时不能选用绝对定位，因为它对整个布局的影响太过强烈。
„ 如果需要居中的元素已经在高度上超过了视口，那它的顶部会被视
口裁切掉（参见图 7-19）。有一些办法可以绕过这个问题，但 hack
味道过浓。
„ 在某些浏览器中，这个方法可能会导致元素的显示有一些模糊，因
为元素可能被放置在半个像素上。这个问题可以用 transform- 图 7-19
style: preserve-3d 来修复，不过这个修复手段也可以认为是一个 当需要居中的元素在高度上超过
hack，而且很难保证它在未来不会出问题。 了视口时，它的顶部会被裁掉

试一试 play.csssecrets.io/vertical-centering-abs

实践证明，想要找到最先提出这个实用技巧的人确实不容易，不过所
能挖掘到的最早起源似乎是 Stack Overflow（http://stackoverflow.com）的用
户“Charlie”（http://stackoverflow.com/users/479836/charlie）， 他 在 2013 年
4 月 16 日回答了“如何使用 CSS3 实现垂直对齐”（http://stackoverflow.com/
a/16026893/90826）这个问题。 致 敬

40 垂直居中 187

඀ࠡ JOEC