Trying to absolute center ul (vertical and horizontal) in nav

Question

... with the help of this tutorial at > coding.smashingmagazine.com/..

nav {
    color: #fff;
    background-color: #333;
    position: relative;
    height: 200px;
}

nav ul {
    list-style: none;
    overflow: auto;
    width: 50%;
    height: 50%;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

nav li {
    display: inline-block;
    margin: 0 10px;
    font-size: 25px;
    line-height: 100%;
}

I can't get it right. Look at my jsfiddle .

Thanks for any help.

An image ... chrome/macos x 10.8.x > is the ul v/h centered?

Answer 1

This could be much more easily accomplished with the following CSS. No need for absolute on the UL. See http://jsfiddle.net/9N2hW/2/

nav {
    color: #fff;
    background-color: #333;
    position: relative;
    height: 200px;
}

nav ul {
    list-style: none;
    overflow: auto;
    width: 50%;
    margin: auto;
}

nav li {
    display: inline-block;
    margin: 0 10px;
    font-size: 25px;
    line-height: 200px;
}

Answer 2

I would get rid of the absolute positioning, if you're willing to have a fixed height to your nav container, you can just use line height, like so :

nav {
    color: #fff;
    background-color: #333;
    height: 200px; /* This must be defined and match the line-height below */
    text-align: center;
}

nav ul {
    white-space:nowrap;
    padding: 0;
}

nav li {
    display: inline;
    font-size: 25px;
    line-height: 200px; /* This must match the nav height defined above */
}