ナビゲーションの中央揃え

グローバルナビなどのナビゲーションを中央揃えにする方法です。
ナビゲーションが固定幅なら両サイドのマージンをautoにすれば済みます。
ナビゲーションを中央揃えにするサンプル
CSSコード

*{
  list-style: none;
  margin:0;
  padding:0;
}
nav{
  background-color: yellow;
}
ul{
  background-color: blue;
  width:615px;
  overflow:hidden;
  margin:auto;
}
li{
  margin-right: 5px;
  background-color: red;
  float:left;
  width:150px;
  text-align:center;
}
li:last-child{
  margin-right: 0;
}

HTMLコード

<nav class="global">
    <ul>
        <li>AAAAAAAAAA</li>
        <li>BBBBB</li>
        <li>CCCCCCCC</li>
        <li>DD</li>
    </ul>
</nav>

けれども、計算が面倒だったり、幅を固定しない場合など困ったことになります。

positionを使用する方法

この方法は、ナビゲーション全体（ul)をpositionを使用してナビゲーションの親要素のleft:50％の位置に配置します。これではナビゲーション(ul)の左端が親要素の50％に位置します。そのため、更にナビゲーションの中の各liに対してleft:-50％とするとli要素群の中心が親要素のleft:50％の位置に来てくれます。
ナビゲーション関連の全ての要素にposition: relativeを指定することがポイントです。

positionを使用する方法のサンプル
CSSコード

*{
  list-style: none;
  margin:0;
  padding:0;
}
nav{
  background-color: yellow;
}
ul{
  background-color: blue;
}
li{
  margin-right: 5px;
  background-color: red;
  opacity: 0.8;
}
.global {
    overflow: hidden;
    position: relative;
}
.global ul {
    float: left;
    position: relative;
    left: 50%;
}
.global ul li {
    float: left;
    position: relative;
    left: -50%;
}

HTMLコード

<nav class="global">
    <ul>
        <li>AAAAAAAAAA</li>
        <li>BBBBB</li>
        <li>CCCCCCCC</li>
        <li>DD</li>
    </ul>
</nav>