Vertically center items with flexbox

Question

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).

I am trying to vertically align the spans in #trigger.

Here is my 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.

Answer 1

The align-items property is for flex containers (elements with display: flex applied to them), not flex items (children of flex containers). The old 2009 spec does not have a property comparable to align-items; the box-align property from 2009 matches up to align-content from the standard spec.

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

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 -

#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 specifies how the box's children should be aligned, which in our case is vertical.

box-pack aligns the children along the box-orient axis.

box-align aligns 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.

Here's a Codepen demonstration, the properties I've applied on span elements other than display: block are purely for cosmetic purposes.