Как выровнить текст по высоте?

<div class="home">
<div class="header-tinting">
<div class="basis-menu"></div>
<nav id="menu">
<div id="box">
<ul>
<li class="active"><a href="#ex1">Home</a></li>
<li><a href="#ex2">About</a></li>
<li><a href="#ex3">Resume</a></li>
<li><a href="#ex4">Portfolio</a></li>
<li><a href="#ex5">Blog</a></li>
<li><a href="#ex4">Contact Me</a></li>
</ul>
</div>
</nav>
</div>
</div>

header {
position: relative;
width: 100%;
height: 100vh;
min-height: 620px;
}
.home {
position: relative;
width: 100%;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
background-position: center;
text-align: center;
background-size: cover;
}
/* === Header tinting === */
.header-tinting {
background: rgba(29, 32, 33, 0.35) none repeat scroll 0 0;
content: "";
height: 100%;
left: 0;
top: 0;
width: 100%;
position: relative;
}
.basis-menu {
position: fixed;
width: 100%;
height: 70px;
border-bottom: 1px solid rgba(255, 255, 255, 0.6);
opacity: 1;
transition: all 1s linear;
-moz-transition: all 1s linear;
-webkit-transition: all 1s linear;
-o-transition:all 1s linear;
}
#menu {
display: block;
position: relative;
width: 100%;
max-width: 1920px;
height: 70px;
font-family: 'Asap', regular, monospace;
font-size: 28px;
}
#menu ul{
list-style: none;
float: none;
display: inline-table;
padding: 15px 10px;
}
#menu li {
list-style: none;
}
#menu li a {
text-decoration: none;
text-transform: uppercase;
color: #fff;
display: inline-block;
position: relative;
white-space: nowrap;
padding: 0px 1px;
color: rgb(255, 255, 255);
text-decoration: none;
font-weight: 300;
letter-spacing: 2px;
display: inline-block;
}
#menu li a .hover {
color: #6bb9f0;
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 0%;
overflow-x: hidden;
transition: all 0.5s ease;
white-space: nowrap;
padding: 0 1px;
}
#menu li a:hover .hover {
width: 100%;
}
#menu li {
float:left;
}
#box {
width: 800px;
height: 70px;
margin: auto;
}