html - Vertically center list in div -

i have div of fixed dimensions , unordered list inside it. list's items positioned horizontally 1 next another. i'm trying make slider show 1 list element after another. can't center list , elements vertically inside div because don't know height of list.

here's code:

html

<div id="container">    <ul>       <li>...</li>       <li>...</li>       <li>...</li>    </ul> </div> 

css

#container {   width: 584px;   height: 50px;   position: relative;   overflow: hidden; }  #container ul {   position: absolute;   margin: 0;   padding: 0;   width: 3504px; }  #container ul li {   width: 584px;   float: left;   margin: 0;   padding: 0;   overflow: hidden; } 

any possible way in css?

i didn't understand necessity of overflow hidden , huge width values have made expecting.

using display:table-cell , vertical-align:middle can align content vertically middle.

#container {   width: 584px;   height: 50px;   position: relative; } #container ul {   margin: 0;   padding: 0; } #container ul li {     width: 100px;     background:grey; display:table-cell;     border:white solid 2px;     vertical-align:middle;     margin: 0;     padding: 0;  } 

demo