Centering content in Foundation 6 Flex Grid - html

Question

I am using the Flex Grid component of Zurb Foundation 6 to create a grid of responsive squares -- and that works beautifully. For the life of me, however, I cannot get the square content centered. I have tried all the usual css tricks: relative/absolute, a nested flex grid, etc. There must be something I am missing -- thanks for your help.
Here is the jsfiddle (which is the base code without any attempt at centering).
<div class="row">
<div class="square small-6 columns">
ABC
</div>
<div class="square small-6 columns">
DEF
</div>
</div>
<div class="row">
<div class="square small-6 columns">
123
</div>
<div class="square small-6 columns">
456
</div>
</div>
.square {
border: solid blue 1px;
padding-bottom: 30%;
}

Answer 1

For the life of me, however, I cannot get the square content centered. I have tried all the usual css tricks: relative/absolute, a nested flex grid, etc.
Well, the nested flex grid actually works:
.square {
border: solid blue 1px;
padding-bottom: 30%;
display: flex; /* new */
justify-content: center; /* new */
align-items: center; /* new */
}
It centers the content both vertically and horizontally.
The problem is that the boxes don't have any height. There's no space for the content to move vertically. What looks like height is actually padding, and that's outside the content box.
This is what the layout looks like without the padding-bottom: 30%: DEMO 1
Then add the nested flex container: DEMO 2
Then give the box some height: DEMO 3
Per the CSS Box Model, text goes in the content box. The padding is generally a content-free zone.

Answer 2

Here you go
li {
width:50%;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
}
That is it, does the trick. Responsive etc.
Link
http://codepen.io/damianocel/pen/WrMmGe

Answer 3

You can do this with Foundation 6 (with Flex-Grid) only too.
The trick is to attach both align-spaced and align-middle to the outer row.
<div class="row align-spaced align-middle">
<div class="square small-6 row align-center">
<div class="row align-middle">
<span>ABC</span>
</div>
</div>
<div class="square small-6 row align-center">
<div class="row align-middle">
<span>DEF</span>
</div>
</div>
</div>
<div class="row align-spaced align-middle">
<div class="square small-6 row align-center">
<div class="row align-middle">
<span>123</span>
</div>
</div>
<div class="square small-6 row align-center">
<div class="row align-middle">
<span>456</span>
</div>
</div>
</div>
<style>
.square {
border: solid blue 1px;
height: 30vh;
}
</style>
as #michael-b points, the height is important.
Also, you can cut off one div layer if you do not need the blue line.
<div class="row align-spaced align-middle" style="height: 100px;">
<div class="small-6 row align-center">
<span>...</span>
</div>
</div>