[注解] [705] 垂直居中

[cssmagic]

花絮与注解

第 187 页 ‧ 第二个列表项

如果需要居中的元素已经在高度上超过了视口，那它的顶部会被视口裁切掉。

它的底部也会超出视口，只不过我们可以通过页面滚动来查看超出视口的内容。但顶部超出视口的内容就完全没有办法了。

在这个方案中，如果希望这个垂直居中的元素居有停留在视口中央的效果（比如它是一个对话框），我们往往会把 absolute 换成 fixed。此时，如果这个元素的超高的话，则它底部超出视口的区域也将无法看到了，因为它已经不会随着页面的滚动而滚动了。

第 187 页 ‧ 最后一个列表项

在某些浏览器中，这个方法可能会导致元素的显示有一些模糊，因为元素可能被放置在半个像素上。这个问题可以用 transform-style: preserve-3d 来修复，不过这个修复手段也可以认为是一个 hack，而且很难保证它在未来不会出问题。

这种现象往往出现在以下两种条件下：

• 元素的宽度或高度是奇数像素值，因此引擎在计算 translate(-50%, -50%) 时会产生小数（即书中提到的 “半个像素”）。

• 引擎支持视网膜显示屏的物理像素级别的渲染（也就是说，引擎支持以 “半个像素” 或更小的单位来计算布局），而实际设备并没有配备视网膜显示屏。比如一台升级到了 iOS 4+ 的 iPod touch 2，或者运行在常规显示器上的 Chrome 浏览器。

在这种情况下，引擎绘制出的元素布局与显示器的物理像素栅格之间存在错位，最终的显示效果就是模糊的了。

如何避免这种模糊效果？除了书中提到的 preserve-3d 这个 hack 之外，最保险的方案还是确保这个元素的宽高总是偶数像素值。