使用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项目(flex容器的子容器).旧的2009年规格没有可比的财产align-items; 该box-align物业从2009年开始符合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和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-orient 指定框的子项应如何对齐,在我们的例子中是垂直的.

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

box-align 对齐框内的孩子,它的轴垂直于盒子方向的轴,即在我们的情况下,由于盒子方向是垂直的,它将决定孩子们水平对齐.

这是一个Codepen演示,我应用于span元素以外的属性display: block纯粹用于美容目的.