使用flexbox垂直對齊單個子元素

Question

我正在嘗試均勻分布可變數量的列，其中包含可變數量的垂直居中的子元素。 我幾乎想要的地方，但是如果我將子元素的數量減少到1，則垂直對齊失敗（第一行和第五行）。

我究竟做錯了什么？

守則（ 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