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.