我试图用CSS’flexBox垂直居中的项目;而且，我知道如何使用非供应商前缀的代码，但即使使用供应商前缀，我无法使其在Webkit(Chrome)中工作。
我试图在#trigger中垂直对齐跨距。
这里是我的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;
}
任何想法我做错了什么？
解决方法
align-items属性用于Flex容器(具有display：flex的元素应用于它们)，而不是Flex项(flex容器的子元素)。旧的2009年规格没有与对齐项目相当的财产; 2009年的Box-align属性与标准规格匹配。
#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>
