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