Page 220 - css揭秘
P. 220
基于 Flexbox 的解决方案
这是毋庸置疑的最佳解决方案，因为 Flexbox（伸缩盒）（http://w3.org/
TR/css-flexbox）是专门针对这类需求所设计的。我们之所以要讨论其他方
案，仅仅是因为那些方案在浏览器的支持程度上稍微好一些而已。其实目前
现代浏览器对 Flexbox 的支持度已经相当不错了。
我们只需写两行声明即可：先给这个待居中元素的父元素设置 display:
flex（在这个例子中是 <body> 元素），再给这个元素自身设置我们再熟悉不
过的 margin: auto（在这个例子中是 <main> 元素）：
body {
display: flex;
min-height: 100vh;
margin: 0;
}
main {
margin: auto;
}
请注意，当我们使用 Flexbox 时，margin: auto 不仅在水平方向上将元
素居中，垂直方向上也是如此。还有一点，我们甚至不需要指定任何宽度（当
然，如果需要的话，也是可以指定的）：这个居中元素分配到的宽度等于 max-
content。（还记得“自适应内部元素”中提到的那些内部尺寸关键字吗？）
如果浏览器不支持 Flexbox，页面渲染结果看起来就跟我们的起点图
7-17 是一样的了（如果设置了宽度的话）。虽然没有垂直居中效果，但也是
完全可以接受的。
Flexbox 的另一个好处在于，它还可以将匿名容器（即没有被标签包裹
的文本节点）垂直居中。举个例子，假设我们的结构代码是：
<main>Center me, please!</main> HTML
我们先给这个 main 元素指定一个固定的尺寸，然后借助 Flexbox 规范
所引入的 align-items 和 justify-content 属性，我们可以让它内部的文
关于未来 把所有东西都对齐吧！
根据盒对齐模型（第三版）（http://w3.org/TR/css-align-3）的计划，在未来，对于简单的垂直居中需求，
我们完全不需要动用特殊的布局模式了。因为只需要下面这行代码就可以搞定：
align-self: center;
不管这个元素上还应用了其他什么属性，这样写就够了。这听起来可能如美梦一般令人难以置信，但或许
你手边的浏览器很快就会让它成为现实！
40 垂直居中 189
ࠡ JOEC
