Html – Vertically centering a UL inside a DIV

csshtml

I have the following:

<div style="background: Red; height: 100px;">
  <ul>
    <li><a href="/">Home</a></li>
  </ul>
</div>

I would like to vertically center the ul in the div but I'm not sure how.
Fiddle demo Can anyone advise me on this.

Marilou

Best Solution

You could always use display: table-cell; in combination with vertical-align: middle;:

HTML:

<div>
  <ul>
    <li><a href="/">Home</a></li>
  </ul>
</div>

CSS:

div {

    background: red;
    height: 100px;
    width: 500px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;

}

See working jsFiddle demo