Css 使用flexbox将项目垂直居中

我试图用CSS的flexbox垂直居中项目；而且，我知道如何使用非供应商前缀代码，但即使使用供应商前缀，我也无法让它在Webkit（Chrome）中工作

我正在尝试垂直对齐#触发器中的跨距

这是我的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中使用。

使用以下属性可以实现垂直对齐布局，请注意，这使用的是旧语法，尽管我已经在最新的Chrome版本上进行了测试，火狐与火狐极光-

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

沿长方体方向轴对齐子对象

框对齐

对齐框内的子对象，它的轴垂直于框方向轴，即在我们的例子中，由于框方向是垂直的，它将决定子对象的水平对齐

---

这里是一个例子，我在span元素上应用的属性，而不是

display:block

，纯粹是出于装饰目的。

对齐项目

属性用于flex容器（应用了
display:flex
的元素），而不是flex项目（flex容器的子项）。旧的2009规范没有可与
对齐项目
相比的属性；2009年的
框对齐
属性与标准规范中的
对齐内容
匹配


#触发器{
显示：-webkit flexbox；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit-flex-align：居中；
-ms-flex-align：居中；
-webkit对齐项目：居中；
对齐项目：居中；
文本对齐：居中；
高度：10公分；
背景：黄色；
}
Lorem ipsum dolor sit amet，是一位杰出的献身者。Phasellus porta Elite vel ante hendrerit facilisis。从直径上来说，这是一个非常好的例子。
使用
盒式包装
/
调整内容
进行垂直居中仅在柔性对齐为列/垂直而非行/水平时有效。如果OP希望元素水平布置，则必须在弹性项目上暗示高度并启用环绕。据我所知，仅实现旧的2009规范的浏览器根本不支持包装。你是对的，但正如问题中所述，OP实际上试图“垂直”对齐#trigger中的跨距，因此我认为上述实现适合该用例。顺便说一句，你使用的是更旧、速度更慢的前缀，新的一个是display:flexyes，这是使用旧语法的，正如我在上面的回答中所提到的。这里有一个演示，演示了垂直/水平居中的匿名flex项：谢谢，演示效果很好，但是当我尝试将它应用到我的代码中时，它不起作用。你介意看看我的#trigger和#trigger span的css吗？哪个演示？对于codepen上的一个，触发器将指向ul，跨度将对应于li。如果这不能解决问题，请提供一个演示，这样我就可以看到问题。js fiddle工作得非常好。哦，现在它开始工作了。也许昨晚我想实施的时候已经太晚了。谢谢你的帮助！这可能会派上用场：
#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>