以前、「CSSで右寄せ・左寄せ・中央寄せする」をメモりましたが、それだけでは、中央に寄らないものがあります。
それは、リスト要素です。

ただリスト要素を中央寄せにするのは、前に紹介した記事で出来ますが、メニューやソーシャルボタンなど、リスト要素を並べて中央寄せにする場合が曲者です。
何度、泣かされたことか。

寄せる・揃える編、これが山場でございます。
今回は、それらを整理メモしていきます。

デモについて（HTMLとCSSの注意点）

HTMLは、ほぼほぼこのコーディングを使っています。
追記があれば、各コーディングのところで補足します。

<ul class="demo*">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
</ul>

また各デモでは、分かりやすいように線など装飾系のコーディングを書いています。
説明では、装飾系のコーディングは割愛しています。

marginを使う

.demo1{
  width: ***;
  margin-right: auto;
  margin-left: auto;
}
.demo1 li{
  float: left;
}

この場合、リスト要素の横並びは、floatで並べていますが、後述のdisplayを使ってもOKです。

「marginを使う方法」は、「CSSで右寄せ・左寄せ・中央寄せする」で紹介した要領と同じです。

リスト要素の左右にmargin:auto;を設定します。
中央寄せの基本ということで、直感的にコーディングできます。

See the Pen margin-list-center by webfeelfree (@webfeelfree) on CodePen.4259

しかし、この方法は、リスト要素にwidth(幅)を指定しなければならないデメリットがあります。

これが、何を意味するかというと、例えば・・・
・新しくメニューを追加したとき、デザインが崩れる
・OS依存で、フォントのサイズや種類が変わってしまいデザインが崩れる
などの問題を引き起こしてしまいます。

そのため、幅を設定しなおしたり、見越して設定しなければならないので、メンテナンス性の低いコーディングになってしまいます。

逆に表っぽいデザインの固定幅のリストには、威力を発揮するコーディングと言えますね。

inlineを使う

.demo2{
  text-align: center;
}
.demo2 li{
  display: inline;
}

displayを使って、リスト要素にinlineを指定して横並びにしています。
inline（インライン）とは、ザックリいうと、複数行のリストを1行の文字列にするという感じです。

インライン（文字列）にすることによって、text-alignが効くようになります。

非常にシンプルなコーディングです。

See the Pen inline-list-center by webfeelfree (@webfeelfree) on CodePen.4259

簡単でいいのでは？と思いますが、デメリットもあります。

それは、<li>を改行したときに余計な空白が入るという事です。

デモは「marginを使う」方法と同じ余白を設定していますが、余白が広くなっています。

それじゃ～改行しなければいいのでは？と思いますが・・・それはそれで正解です。
ですが、HTMLの見栄え・視認性が悪くなり、メンテナンス性の低いコーディングになってしまいます。

他にも、余白をなくす方法がありますが、結局のところ一手間、加えることになります。

余白が気にならない、影響しないという人は、コーディングもシンプルですし、アリだと思います。

inline-blockを使う

.demo3{
  text-align: center;
}
.demo3 li{
  display: inline-block;
  /display: inline;
  /zoom: 1;
}

「inlineを使う」方法との相違になりますが、inlineがinline-blockになったことと、6行目と7行目に、IE7とIE6に対応するためのコードを追記しています。

inline-blockは横並び（インライン）にしつつ、<li>に幅と高さを指定することができます。

インライン要素とブロック要素を掛け合わせた便利な属性です。

See the Pen inline-block-list-center by webfeelfree (@webfeelfree) on CodePen.4259

こちらもシンプルなコーディングですが、「inlineを使う」方法と同じように余計な空白が入ってしまいます。
そして、前述したようにIE7とIE6に対応するための追加のコーディングが必要になってきます。

potisionを使う

.demo4{
  position: relative;
  overflow: hidden;
}
.demo4 ul{
  position: relative;
  left: 50%;
  float: left;
}
.demo4 li{
  position: relative;
  left: -50%;
  float: left;
}

親切な人が考え出して、親切な人が布教してくれているコーディングです。

floatで並べて、<ul>要素を右に50%移動させて、<li>要素を左に50%移動させています。
何を言っているのか？ワカンネ？？っていう複雑なところがデメリットでしょうか？

See the Pen position-list-center by webfeelfree (@webfeelfree) on CodePen.4259

ここでは、HTMLでリスト要素を<div>で囲まなければならないことにも注意が必要です。

floatしたら、clearなどを使って、floatを解除するのが定石ですが、このコーディングは、改めてfloatを解除する必要がありません。

ただ、IE6はfloatが解除されないようです。
XPと一緒に、IE6は、もうすぐなくなりそうですが・・・

とりあえず、コピペとclass指定だけで、簡単にリスト要素を中央寄せできる感じです。

and one-おまけ-

.demo5{
  position: relative;
  left: 50%;
  float: left;
}
.demo5 li{
  position: relative;
  left: -50%;
  float: left;
}
p{
  clear: both;
}

最後におまけ程度で・・・「positionを使う」方法のコーディングの余計な贅肉を取ってみました。

See the Pen potision-clear-list-center by webfeelfree (@webfeelfree) on CodePen.4259

私自身、HTMLに余計な記述を入れるのが好きではないので<div>を外した方法です。

仮想テストはしたんですが、実装経験がないので、安全保障はありません。
だから、おまけです。

この方法はclearなど使って、floatを解除する必要性が出てきます。

あとがき

4種類+αを紹介しましたが、どれもメリットとデメリットがあるので、用途に合わせて使いましょう。

これっていう、オススメはありませんが「marginを使う」方法は、あんまりオススメできません（苦笑

参考
横並びリストを中央寄せにする – CSSテクニック – acky info
floatで並べたリストのセンタリング – Weblog – Hail2u.net