html - このメニューを中央に配置する方法

Question

こんにちは、div の中央に配置する必要があるドロップダウン メニューがあります。div の幅は 970px で、メニューを真ん中に配置したいと思います。問題は、私が何をしようとしても、これを機能させることができるということです。

<div id="menuwrapper">
    <ul class="menu" id="menu">
        <li><a href="#" >Home</a></li>
        <li><a href="#">Services</a>
            <ul>
                <li><a href="#">Flights</a></li>
                <li><a href="#">Car Hire</a></li>
                <li><a href="#">Hotel Arrangements</a></li>
                <li><a href="#">Ferries</a></li>
                <li><a href="#">Other Services</a></li>
            </ul>
        </li>
        <li><a href="#">About us</a></li>
        <li><a href="#">Why us</a></li>
        <li><a href="#">Frequently Asked Questions</a></li>
        <li><a href="#">Testimonials</a></li>
        <li><a href="#">Contact us</a></li>
    </ul>
</div>

そしてここにcssがあります

#menuwrapper {
    height: auto;
    width: 970px;
    position: relative;
    float: left;
    padding: 0px;
    margin: 0px;
    clear: both;
}

ul.menu {
    list-style:none;
    margin:0;
    padding:0;
    font: 16px/20px 'TitilliumText22LLight', Arial, sans-serif;
    text-shadow: #638517 1px 1px 1px;
    color:#FFF;
}

ul.menu * {
    margin:0;
    padding:0
}

ul.menu a {
    display:block;
    color:#FFF;
    text-decoration:none
}

ul.menu li {
    position:relative;
    float:left;
    margin-right:0px;
    border-right-style:none;
    border-left-style:none;
    height: 27px;
    border-top-style: none;
    border-bottom-style: none;
    background-image: url(menuslit.gif);
    background-repeat: repeat-y;
    background-position: left top;
    padding-top: 10px;
    padding-right: 6px;
    padding-bottom: 0px;
    padding-left: 6px;
}

ul.menu ul {
    position:absolute;
    top:37px;
    left:0;
    background:#3f3f3f;
    display:none;
    opacity:0;
    text-shadow: none;
    list-style:none;
}

ul.menu ul li {
    display:block;
    background-color:#3f3f3f;
    width: 200px;
    background-image: url(over2.gif);
    background-repeat: repeat;
    padding: 5px 0px 5px 5px;
    font: 14px/20px 'TitilliumText22LLight', Arial, sans-serif;
    height: auto;
}

ul.menu ul li:hover {
    background-image: url(over3small.gif);
    background-repeat: repeat;
}

ul.menu ul ul {
    left:205px;
    top:-0px
}

ul.menu .menulink {
    border:0px solid #aaa;
    padding:10px 7px 0px;
    font-weight:normal;
    width:auto;
    height:30px;
}

ul.menu li:hover {
    background-image: url(over3.gif);
    background-repeat: repeat;
    border-left-width: 0px;
    border-left-style: solid;
    border-left-color: #b7b7b7;
    text-shadow: none;
    background-position: left top;
}

ul.menu .sub {
    background:#d1d1d1 url(sdsimages/arrow.gif) 190px 8px no-repeat
}

ul.menu .topline {
    border-top:0px solid #aaa
}