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

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;
}


    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta elit vel ante hendrerit facilisis. Curabitur aliquam sollicitudin diam, id posuere elit consectetur nec.