Flexbox：水平和垂直居中

Question

Flexbox：水平和垂直居中

如何使用flexbox在容器内水平和垂直居中div。在下面的例子中，我希望每个数字彼此相同（在行中），它们是水平居中的。

.flex-container {

  padding: 0;

  margin: 0;

  list-style: none;

  display: flex;

  align-items: center;

  justify-content: center;

}

row {

  width: 100%;

}

.flex-item {

  background: tomato;

  padding: 5px;

  width: 200px;

  height: 150px;

  margin: 10px;

  line-height: 150px;

  color: white;

  font-weight: bold;

  font-size: 3em;

  text-align: center;

}

<div class="flex-container">

  <div class="row">

    <span class="flex-item">1</span>

  </div>

  <div class="row">

    <span class="flex-item">2</span>

  </div>

  <div class="row">

    <span class="flex-item">3</span>

  </div>

  <div class="row">

    <span class="flex-item">4</span>

  </div>

</div>

http://codepen.io/anon/pen/zLxBo