Vertically centering a UL inside a DIV

Question

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

Answer 1

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

Answer 2

CSS does not support vertical centering of arbitrary block elements. However, there are many "hacks" that will let you "make it work".

You can set the parent div to display:inline. However, you will then have issues with your height and background color.

W3C Link: http://www.w3.org/wiki/CSS/Properties/vertical-align

One hack that will do it: (has a great explanation too) http://phrogz.net/css/vertical-align/index.html