html - 使用 flexbox 垂直对齐单个子元素

Question

我试图让可变数量的列均匀分布，其中包含可变数量的垂直居中的子元素。我几乎到了我想要的位置，但如果我将子元素的数量减少到一个，垂直对齐就会失败(第一行和第五行)。

我做错了什么？

代码(http://codepen.io/anon/pen/bpvMda):

.myView {
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 500px;
  width: 500px;
}
.wpType {
  flex: 0 1 auto;
  display: flex;
  flex-flow: row wrap;
  align-items: space-around;
  align-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
  border: 1px solid silver;
}
.wpType:nth-child(even){
  background: blue;
}
.wpType:nth-child(odd){
  background: red;
}
.wp {
  flex: 0 1 auto;

  padding: 5px;
  width: 100px;
  height: 100px;
  margin: 10px;
  background: white;
  line-height: 100px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

<div class="myView">
  <div class="wpType">
    <div class="wp"></div>
  </div>
  <div class="wpType">
    <div class="wp"></div>
    <div class="wp"></div>
    <div class="wp"></div>
  </div>
  <div class="wpType">
    <div class="wp"></div>
    <div class="wp"></div>
    <div class="wp"></div>
  </div>
  <div class="wpType"><div class="wp"></div>
    <div class="wp"></div></div>
  <div class="wpType"><div class="wp"></div></div>
</div>

Answer 1

在所有居中元素的父 div 上使用这些属性。

display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;

Codepen