Vertically centering a UL inside a DIV

I have the following:

<div style="background: Red; height: 100px;">
  <ul>
    <li><a h开发者_如何学JAVAref="/">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

---

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

---

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

---

Use the CSS position property

#ulid{position:relative; top:50%; left: 50%;}

pass the id to ul
<ul id="ulid">

http://jsfiddle.net/JzuFT/9/

---

You could try something like this: http://jsfiddle.net/S8cj5/

Adding an inner span prior to the <li> inner text is something I've found quite useful in the past for vertically positioning an <li>.