Getting link text (1 line only) to be centred vertically can be done by setting the link's line-height equal to the link's height. This requires (for a row of links) that the link's display is set to inline-block, so the link can then use the assigned height.
The complication is the 2-line link. But that could be handled manually by setting a class to any 2-line links, and using that to override the line-height to be half the link's height. This centres the 2 lines, by spreading them evenly over the full link height. That may or may not be what you want. Anyway, below is a quick example of this line-height method.
It uses the more traditional way of grouping nav links, using UL-LI elements, rather than DIVs.
(If instead you wanted to centre any multi-line content closer together in the middle of its link, the display:table-cell method suggested by felgall would do that.)
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title></title>
<style type="text/css">
ul { width: 36em;
margin: 0 auto;
font: 1.4em Arial, Helvetica, sans-serif;
list-style: none; }
li { display: inline; }
a { display: inline-block;
float: left;
width: 8.5em;
height: 4em;
line-height: 4em; /* for 1 line content */
text-align:center;
background-color:#FFFFFF;
color:#87BEEA;
text-decoration:none;
border: 1px solid blue; }
a.br { line-height: 2em; } /* for 2 line content */
a:hover { background-color:#FCFCFC;
color:#FF1135; }
</style>
</head>
<body>
<ul>
<li><a href="#" class="br">PERSONAL<br>STATEMENT</a></li>
<li><a href="#">PROFICIENCIES</a></li>
<li><a href="#">EXPERIENCE</a></li>
<li><a href="#">EDUCATION</a></li>
</ul>
</body>
</html>