Center divs vertically within divs - html

Question

So, I have a page (height 100%) split into two rows (top half 30%, bottom half 70%).
https://jsfiddle.net/qL0s07nr/
I have an h2 tag enclosed within one column in the top half which I want to center vertically, and I have 3 other columns in the bottom half which need centering vertically too.
<div class="container gb">
<div class="row" style="height:30%; background: #f6f6f6;">
<div class="twelve columns">
<h2 style="text-align: center;">30%</h2>
</div>
</div>
<div class="row" style="height:70%; background: #d4fff0">
<div class="one-third column">
<div style="height: 100px; width: 100px; background-color:red;"></div>
</div>
<div class="one-third column">
<div style="height: 100px; width: 100px; background-color:blue;"></div>
</div>
<div class="one-third column">
<div style="height: 100px; width: 100px; background-color:green;"></div>
</div>
</div>
</div>
My css for the columns is as follows:
width: 100%;
float: left;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
Full CSS:
.container.gb {
width: 100%;
max-width: 100%;
height: 100%;
}
.container {
position: relative;
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
.column, .columns {
width: 100%;
float: left;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.one-third.column {
width: 30.6666666667%;
}
html, body {
height: 100%;
}
But for the life of me, I can't understand why it won't work. I am targeting the correct div, but it won't center for some reason. Any help is most appreciated.

Answer 1

Check this version: http://jsfiddle.net/leojavier/ko8wke5z/
<div class="container gb">
<div class="row" style="height:30%; background: #f6f6f6;">
<div class="twelve columns">
<h2 style="text-align: center;">30%</h2>
</div>
</div>
<div class="row rowb" style="height:70%; background: #d4fff0">
<div class="one-third column">
<div style="height: 100px; width: 100px; background-color:red;"></div>
</div>
<div class="one-third column">
<div style="height: 100px; width: 100px; background-color:blue;"></div>
</div>
<div class="one-third column">
<div style="height: 100px; width: 100px; background-color:green;"></div>
</div>
</div>
</div>
full CSS
.container.gb {
width: 100%;
max-width: 100%;
height: 100%;
}
.container {
position: relative;
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
.column, .columns {
width: 100%;
float: left;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.one-third.column {
width: 30.6666666667%;
display: table-cell;
text-align: center;
vertical-align: middle;
float: none;
}
.rowb {
display: table;
width: 100%;
}
html, body {
height: 100%;
}
you can try it here: http://jsfiddle.net/leojavier/ko8wke5z/

Answer 2

The div that contains your <h2> does not use the full height of the row. Add his to your css:
.twelve.columns{height:100%}
If that class is going to get used again somewhere that style won't work give that div another class or an id (or an inline style).

Answer 3

Flexbox requires a flex container and flex items - it's a parent:children relationship. If you're using flexbox and presumably don't need older browser support, you can get rid of all those floats and specified widths. Your responsive layout can be done entirely with flexbox.
See this fiddle for responsive centered columns with matching gutters: https://jsfiddle.net/qL0s07nr/1/
Also, this flexbox guide is an excellent resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/