html - この div を画面上部の中央に揃えますか?

Question

現時点で私が持っているのは、ナビゲーションバーを含む div です。私が望むのは、ナビゲーションバーを画面の中央に配置することです。解像度に関係なく？

HTMLコード

<div class="navigation" >
    <ul>
        <li><a href="#"><span>Homepage</span></a></li>
        <li><a href="#"><span>Products and Services</span></a></li>
        <li><a href="#"><span>Contact Us</span></a></li>
    </ul>
</div>

CSSコード

body { 
    margin:0px;
    padding:0px;
    background-image:url('/img/pattern.jpg');
}

#footer {
     position:absolute;
     bottom:0;
     width:100%;
     height:60px;   /* Height of the footer */
     background:#6cf;
}

#header {
     background-image:url('/img/header_img.png');
     padding:10px;
     height:100px;
}


.navigation {
    background: url(images/navigation.png);
    height: 134px;
    overflow: auto;
    display: block;
    float: left;  
    width: 500px;
}
.navigation * {
    padding:0;
    margin:0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    text-transform: uppercase;
}
.navigation ul {
    display: block;
    float: left;
    padding: 0px 0 0 0;
    margin: 37px 0 0 20px;
}
.navigation ul li {
    background-color:White;
    list-style: none;
    float: left;
    margin: 0 0 0 5px;
    border-radius: 10px;
}

.navigation ul li a {
    background-image:url(img/navbutton_back.png);
    display: block;
    padding: 0 13px 0 0;
    color: #578ba0;
    text-decoration: none
}
.navigation ul li.selected a,
.navigation ul li.hover a {
    background-image:url(img/navbutton_back.png);
    color: #578ba0;
}

.navigation ul li a span {
    background-image:url(img/navbutton_back.png);
    display: block;
    padding: 15px 10px 10px 23px;
}
.navigation ul li.selected a span,
.navigation ul li.hover a span {
    background-image:url(img/navbutton_back.png);
}