How to center content in a flexbox - html

Question

I'm having an issue on my project where the content is not aligning vertically in the flexbox. We have a fluid responsive page that needs to center all items within the flexbox via %'s. in the example below we've set a fixed pixel height just so you can play with it.
I have tried a ton of different methods for hours..
body{
margin:0px auto;
}
/* top bar navigation */
.topBoxNav {
background:red;
padding: 0;
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
width: 100%;
height: 50px;
color: white;
font-weight: bold;
font-family: 'League Gothic';
font-size: 1.5em;
text-align: center;
}
.topBoxNav li {
box-sizing: border-box;
border: 1px solid white;
width: 100%;
height: 100%;
}
.topBoxNav a {
text-decoration: none;
color: white;
}
HTML:
<nav class="" alt="top Nav">
<ul class="topBoxNav">
<li>Box1</li>
<li>Box2</li>
<li>Box3</li>
</ul>
</nav>
example:
http://codepen.io/anon/pen/iwDdy

Answer 1

First, realize that the one that has the display: flex property is your ul, not your li elements, so you have two options here:
1) Give your li elements display: flex and add align-items: center to it and justify-content: center
You will get something like this:
.topBoxNav li {
box-sizing: border-box;
border: 1px solid white;
width: 100%;
height: 100%;
display: flex;
align-items center
-moz-align-items center
-ms-flex-align center
-webkit-align-items center
justify-content center
-moz-justify-content center
-ms-flex-pack center
-webkit-justify-content center
}
2) Give your li elements line-height equal to the height, in this case 50px and vertical-align: middle.
You will have something like this:
.topBoxNav li {
box-sizing: border-box;
border: 1px solid white;
width: 100%;
height: 100%;
align-items: center;
-webkit-align-items: center;
vertical-align: middle;
line-height: 50px;
}
Both ways will work :)