与flexbox垂直中心项目

Question

我想垂直居中与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; 
} 

任何想法我做错了吗？

如果您知道我正在使用的属性的其他供应商前缀/版本，请随意分享它们，以便它们不仅可以在Webkit中运行。

Answer 1

的align-items属性是Flex容器（与display: flex元素应用到它们），不弯曲项目（的Flex容器孩子）。旧的2009规格没有与align-items相当的财产; 2009年的box-align财产与标准规格中的align-content相匹配。

http://jsfiddle.net/mnM5j/2/

#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> 

Answer 2

一个垂直排列的布局可以用以下属性来实现，请注意，这是使用旧的语法，虽然我已经测试了最新建立的Chrome，火狐Firefox的&极光 -

#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-orient指定盒子的孩子应该如何对齐，在我们的例子中是垂直的。

box-pack沿着盒子方向的轴对齐孩子。

box-align将盒子中的孩子对齐，它的轴垂直于盒子方向的轴，即在我们的情况下，因为盒子方向是垂直的，所以它将决定孩子水平对齐。

这里是Codepen demonstration，我已经应用于除display: block以外的跨度元素的属性纯粹是为了美观目的。