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 w

Answer 1

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.

Answer 2

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>