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

Question

I'm trying to have a variable number of columns evenly spaced, which contain a variable number of child elements vertically centered. I'm almost where I want to, but if I reduce the amount of child elements to one, the vertical alignment fails (row one and five).

What am I doing wrong?

The Code ( 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

Use these properties on your parent div of all of the centered elements.

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