CSS : Vertical Centering Menu

Vertical centering has always been a fairly elusive goal when doing CSS layouts, but it’s still possible. Here, we'll make a simple center list menu where each list have centering orientation.

Then it's the preview of menu that would be made :

Firstly, we make html file :

menu 1
menu 2
menu 3
menu 4
menu 5
menu 6

After that, let's move out to make style :

body{
 font-size: 12px;
}
.menu{
 border: solid thin #f00;
 margin-top: 45px;
}
.wrapper{
 width: 960px;
 margin: auto;
}

ul#menu {
    text-align: center;
    height: 140px;
    display: table-cell;               /* make unorder list to be table-cell */
    margin: auto !important;
    width: 960px;
    background:  #8fcdea;
    margin: 0px;
    padding: 0px;
    vertical-align: middle;
}
#menu ul {
    display: table;
    margin: 0 auto;
}
#menu li {
    display: inline-block;            /* make list to inline-block */
    position: relative;
    width: auto;
}
#menu li li {
    display: block;
}
#menu ul {
    display: inline-block;
}
#menu li {
    display: inline;
}
#menu a {
    display: inline-block;
    border: solid thin #f00;
    height: 60px;
    display: table-cell;
    vertical-align: middle;    /* set list vertical align : middle */
}
#menu li:hover ul {
    left: 0;
    top: 1.3em;
}
#menu li {
    display: inline;
    margin-left: 0 !important;
    position: relative;
    width: auto;
}
#menu a {
    color: #000000;
    line-height: 1.6;
    padding: 0 2.5em;
    width: 6em;
    text-decoration: none;
}
#menu li li, #menu li li a {
    display: block;
    height: 1.5em;
}
#menu li li a {
    padding: 0;
    width: auto;
}
#menu li:hover ul {
    left: 0;
    top: 1.5em;
}

Note :

The simple way if you want to center certain content vertically :

.container {
   min-height: 10em;  /* set your own height */
   display: table-cell;
   vertical-align: middle;
}

Done !