CSS 使用 flexbox 垂直居中项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15726740/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertically center items with flexbox
提问by IMUXIxD
I'm trying to vertically center items with CSS' flexbox; and, I know how to do it with the non-vendor-prefixed code, but even with the vendor prefixes I can't get it to work in Webkit (Chrome).
我正在尝试使用 CSS 的 flexbox 将项目垂直居中；而且，我知道如何使用非供应商前缀代码来实现，但即使使用供应商前缀，我也无法在 Webkit (Chrome) 中使用它。
I am trying to vertically align the spans in #trigger.
我试图在#trigger 中垂直对齐跨度。
Here is my CSS:
这是我的 CSS：
#trigger{
/* 2009 syntax */
display: -webkit-box;
display: box;
/* current syntax */
display: -webkit-flex;
display: flex;
}
#trigger span{
/* 2009 syntax */
-webkit-box-align: center;
/* current syntax */
-webkit-align-items: center;
flex-align: center;
}
Any ideas what I am doing wrong?
任何想法我做错了什么？
And if you know the other vendor prefixes / versions of the properties that I am using, feel free to share them so that this can work in more than just Webkit.
如果您知道我正在使用的属性的其他供应商前缀/版本，请随时分享它们，以便它不仅可以在 Webkit 中使用。
回答by cimmanon
The align-itemsproperty is for flex containers(elements with display: flexapplied to them), not flex items(children of flex containers). The old 2009 spec does not have a property comparable to align-items; the box-alignproperty from 2009 matches up to align-contentfrom the standard spec.
该align-items属性用于弹性容器（display: flex应用于它们的元素），而不是弹性项目（弹性容器的子项）。旧的 2009 规范没有可比的属性align-items；box-align2009 年的属性与align-content标准规格相匹配。
#trigger {
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
text-align: center;
height: 10em;
background: yellow;
}
<div id="trigger">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta elit vel ante hendrerit facilisis. Curabitur aliquam sollicitudin diam, id posuere elit consectetur nec.</span>
</div>
回答by Vishu
A vertically aligned layout can be achieved with following properties, please note that this is using the old syntax, though I've tested on latest builds of Chrome, Firefox & Firefox Aurora -
可以使用以下属性实现垂直对齐的布局，请注意，这是使用旧语法，尽管我已经在最新版本的 Chrome、Firefox 和 Firefox Aurora 上进行了测试 -
#trigger {
width: 200px;
height: 200px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-pack: center;
-moz-box-align: center;
display: box;
box-orient: vertical;
box-pack: center;
box-align: center;
}
#trigger span {
display: block;
}
box-orientspecifies how the box's children should be aligned, which in our case is vertical.
box-orient指定盒子的孩子应该如何对齐，在我们的例子中是垂直的。
box-packaligns the children along the box-orient axis.
box-pack沿盒方向轴对齐子项。
box-alignaligns the children inside the box, it's axis is perpendicular to the box-orient axis, i.e. in our case since the box-orientation is vertical, it'll decide the alignment of the children horizontally.
box-align对齐盒子内的孩子，它的轴垂直于盒子方向的轴，即在我们的例子中，因为盒子方向是垂直的，它将决定孩子的水平对齐方式。
Here's a Codepen demonstration, the properties I've applied on span elements other than display: blockare purely for cosmetic purposes.
这是一个Codepen 演示，我在 span 元素上应用的属性不是display: block纯粹用于装饰目的。
