Page 219 - css揭秘
P. 219
基于视口单位的解决方案
假设我们不想使用绝对定位，仍然可以采用 translate() 技巧来把这
个元素以其自身宽高的一半为距离进行移动；但是在缺少 left 和 top 的情
况下，如何把这个元素的左上角放置在容器的正中心呢？
我们的第一反应很可能是用 margin 属性的百分比值来实现，就像这样：
main {
width: 18em;
padding: 1em 1.5em;
margin: 50% auto 0;
transform: translateY(-50%);
}
不过，如图 7-20 所示，这段代码会产生十分离谱的结果。原因在于
margin 的百分比值是以父元素的宽度作为解析基准的。没错，即使对于
margin-top 和 margin-bottom 来说也是这样！
不过幸运的是，如果只是想把元素相对于视口进行居中，仍然是有希
望 的。CSS 值 与 单 位（ 第 三 版 ）（http://w3.org/TR/css-values-3/#viewport-
1①
图 7-20 relative-lengths）定义了一套新的单位，称为视口相关的长度单位 。
我们期望 margin 的百分比值可 vw 是与视口宽度相关的。与常人的直觉不符的是，1vw 实际上表示
以基于视口的尺寸来解析，但实
际上这是行不通的 视口宽度的 1%，而不是 100%。
与 vw 类似，1vh 表示视口高度的 1%。
当视口宽度小于高度时，1vmin 等于 1vw，否则等于 1vh。
当视口宽度大于高度时，1vmax 等于 1vw，否则等于 1vh。
在我们的这个例子中，适用于外边距的是 vh 单位：
main {
width: 18em;
padding: 1em 1.5em;
margin: 50vh auto 0;
transform: translateY(-50%);
图 7-21 }
把顶部外边距设置为 50vh 可以
解决我们的问题，现在这个元素 在图 7-21 中可以看到，其效果堪称完美。当然，这个技巧的实用性是
已经正确居中了 相当有限的，因为它只适用于在视口中居中的场景。
试一试 play.csssecrets.io/vertical-centering-vh
① 使用视口相关的长度单位，我们还可以生成一个正好铺满视口的区块，无需脚本的辅助。更
多细节请参阅“用一行 CSS 实现全屏区块”（https://medium.com/@ckor/make-full-screen-
sections-with-1-line-of-css-b82227c75cbd）。
188 第 7 章 结构与布局
ࠡ JOEC
