A Pen by Mario Hernandez.

index.html

<div class="container">
<nav>
    <ul>
        <li class="first"><a class="active" href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Products and Services</a></li>
        <li><a href="#">Locations</a></li>
        <li><a href="#">Support</a></li>
        <li class="last"><a href="#">Contact Us</a></li>
    </ul>
</nav>
 
<div class="clone">
    <a href="https://github.com/mariohernandez/nav/tree/master">View on Github</a>
</div>
<div class="credits">
    <h2>Perfectly centered Flat Main Navigation *</h2>
    <p>A fluid navigation that makes use of css3 transitions as you hover over the link items.</p>
    <em>* not tested in IE <=8 &amp; for now it's not responsive</em>
    <h4 class="developer">By: Mario Hernandez</h4>
    <div class="social">Follow me <a href="https://twitter.com/designsdrive">@designsdrive</a> | <a href="http://designsdrive.com">http://designsdrive.com</a></div>

</div>
</div><!-- /end of container -->

Perfectly-Centered-Navigation.markdown

Perfectly Centered Navigation

A fluid navigation that makes use of css3 transitions as you hover over the link items.

A Pen by Mario Hernandez on CodePen.

License.

style.css

/* Custom styles by Mario Hernandez - http://designsdrive.com
Follow me on twitter @designsdrive */

html {
    font-size: 62.5%;
}

body {
    font-family: 'Droid Sans', sans-serif;
    font-weight: normal;
    color: #4b4b4b;
    font-size: 16px;
    font-size: 1.6rem;
    background: #F9F9F9;
    margin-top: 2em;
}

.container {
    width: 90%;
    margin: auto;
}

nav {
    height: 45px;
    background-color: #4090ba;
    border-radius: 4px;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center; /* This is key to centering the navigation */
    min-height: 45px;
}

nav li {
    display: inline-block;
    margin: 0;
    padding: 0;
    margin-right: -4px;
}

nav a {
    color: #FFF;
    display: inline-block; /* Gives ability for links to inherit dimmension properties */
    padding: .8em;
    text-decoration: none;
    border-right: 1px solid #4ba5d4;
    border-left: 1px solid #347292;
    letter-spacing: .05em;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
}

nav li.first {
    border-left: 1px solid #4ba5d4;
}
/* Rules above and below provide "inset" effect to first and last links */
nav li.last {
    border-right:1px solid #347292;
}

nav a:hover, nav a.active {
    background: #35799d;
    color: #FFF;
}

.credits {
    text-align: center;
    background: #FFF;
    padding: 1em;
    border-radius: 4px;
    border: 1px solid #EDEDED;
}
.credits a {
    color: #4090ba;
    text-decoration: none;
}
.credits em {
    font-size: 12px;
    font-size: 1.2rem;
    color: #ccc;
}
.developer {
    font-style: italic;
    color: #666;
    margin-top: 2em;
}

.clone {
    margin: 4em auto;
    text-align: center;
}
.clone a {
    display: inline-block;
    padding: .6em 1.5em;
    text-align: center;
    background: #f1f1f1;
    border: 1px solid #D7D7D7;
    color: #4b4b4b;
    text-decoration: none;
    border-radius: 4px;
}