Vertical center of menu in a header - css

Question

I am not able to center my menu in a header-bar.
I've tried display: table-cell and display: table but it doesn't work. The only thing I can do is a fixed margin-top, which I want to avoid.
<header>
<div class="container">
<div id="logo"></div>
<div id="mainnav">
<div class="clearfix">
<?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'depth' => 1)); ?>
</di>
</div>
</div>
</header>
div#mainnav {
height: 120px;
width: 70%;
float: right;
background-color: red;
display:table;
}
div.menu {
background-color: yellow;
display:table-cell;
vertical-align:middle;
text-align:center; }
/* clearfix */
div.menu ul:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
I used cleafix to have a div.menu height (it was 0 before).

Answer 1

The centered (table-cell) div needs to be directly under the container (table) div.
You seem to have no .menu in the code, or maybe the PHP generates it - either way, it's nested inside. You might want to make the #mainnav itself as the clearfix, so that the children below it will be directly there.
<div id="mainnav" class="clearfix">
<?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'depth' => 1)); ?>
</div>
Here's an example:
#mainnav {
height: 50px;
border: 1px solid #ccc;
display: table;
padding: 20px;
}
#mainnav .menu-item {
display: table-cell;
vertical-align: middle;
}
<div id="mainnav">
<div class="menu-item">My menu item</div>
</div>

Answer 2

try the code like this instead of display property. Is there any reason to use "display:table"?
UPDATED CSS
div.menu {
background-color: yellow;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 120px;}

Answer 3

Change your css
div.menu {
background-color: yellow;
vertical-align: middle;
text-align: center;
margin: 30px 0;
padding: 0px 20px 0px 0px;
}
and
ul, ol {
margin-top: 0;
margin-bottom: 10px;
margin: 0 auto;
padding: 0px;
}
ul use default margin & padding if not set.