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>.