Open cssmagic opened 7 years ago
如果需要居中的元素已经在高度上超过了视口,那它的顶部会被视口裁切掉。
它的底部也会超出视口,只不过我们可以通过页面滚动来查看超出视口的内容。但顶部超出视口的内容就完全没有办法了。
在这个方案中,如果希望这个垂直居中的元素居有停留在视口中央的效果(比如它是一个对话框),我们往往会把 absolute 换成 fixed。此时,如果这个元素的超高的话,则它底部超出视口的区域也将无法看到了,因为它已经不会随着页面的滚动而滚动了。
absolute
fixed
在某些浏览器中,这个方法可能会导致元素的显示有一些模糊,因为元素可能被放置在半个像素上。这个问题可以用 transform-style: preserve-3d 来修复,不过这个修复手段也可以认为是一个 hack,而且很难保证它在未来不会出问题。
transform-style: preserve-3d
这种现象往往出现在以下两种条件下:
元素的宽度或高度是奇数像素值,因此引擎在计算 translate(-50%, -50%) 时会产生小数(即书中提到的 “半个像素”)。
translate(-50%, -50%)
引擎支持视网膜显示屏的物理像素级别的渲染(也就是说,引擎支持以 “半个像素” 或更小的单位来计算布局),而实际设备并没有配备视网膜显示屏。比如一台升级到了 iOS 4+ 的 iPod touch 2,或者运行在常规显示器上的 Chrome 浏览器。
在这种情况下,引擎绘制出的元素布局与显示器的物理像素栅格之间存在错位,最终的显示效果就是模糊的了。
如何避免这种模糊效果?除了书中提到的 preserve-3d 这个 hack 之外,最保险的方案还是确保这个元素的宽高总是偶数像素值。
preserve-3d
花絮与注解
第 187 页 ‧ 第二个列表项
它的底部也会超出视口,只不过我们可以通过页面滚动来查看超出视口的内容。但顶部超出视口的内容就完全没有办法了。
在这个方案中,如果希望这个垂直居中的元素居有停留在视口中央的效果(比如它是一个对话框),我们往往会把
absolute
换成fixed
。此时,如果这个元素的超高的话,则它底部超出视口的区域也将无法看到了,因为它已经不会随着页面的滚动而滚动了。第 187 页 ‧ 最后一个列表项
这种现象往往出现在以下两种条件下:
元素的宽度或高度是奇数像素值,因此引擎在计算
translate(-50%, -50%)
时会产生小数(即书中提到的 “半个像素”)。引擎支持视网膜显示屏的物理像素级别的渲染(也就是说,引擎支持以 “半个像素” 或更小的单位来计算布局),而实际设备并没有配备视网膜显示屏。比如一台升级到了 iOS 4+ 的 iPod touch 2,或者运行在常规显示器上的 Chrome 浏览器。
在这种情况下,引擎绘制出的元素布局与显示器的物理像素栅格之间存在错位,最终的显示效果就是模糊的了。
如何避免这种模糊效果?除了书中提到的
preserve-3d
这个 hack 之外,最保险的方案还是确保这个元素的宽高总是偶数像素值。