html - Centering content in Foundation 6 Flex Grid -

i using flex grid component of zurb foundation 6 create grid of responsive squares -- , works beautifully. life of me, however, cannot square content centered. have tried usual css tricks: relative/absolute, nested flex grid, etc. there must missing -- help.

here jsfiddle (which base code without attempt @ 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%; } 

for life of me, however, cannot square content centered. have tried usual css tricks: relative/absolute, nested flex grid, etc.

well, nested flex grid works:

.square {     border: solid blue 1px;     padding-bottom: 30%;      display: flex;                /* new */     justify-content: center;      /* new */     align-items: center;          /* new */ } 

it centers content both vertically , horizontally.

the problem boxes don't have height. there's no space content move vertically. looks height padding, , that's outside content box.

this layout looks without padding-bottom: 30%: demo 1

then add nested flex container: demo 2

then give box height: demo 3

per css box model, text goes in content box. padding content-free zone.