inline-blockで要素を横並びで、且つ、横並びにした要素を中央揃えにする方法です。

floatを使って揃えるのと違い、親要素の幅が決まっていなくてもいいので、
親要素の幅が変わる場合、例えば、ブログのようにページ数が今後増えたり、
カテゴリによってはページ数が少なかったりする場合でも使えます。

inline-blockを使うと要素間で隙間が出来てしまいますが、
その対応方法も調べてみました。

デモサイト

横並びで中央揃えする方法

ページ送りのリストを想定して、liタグで組みました。

<ul>
  <li>前</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>次</li>
</ul>

CSSはこのようにしてます。

ul {
  padding: 0;
  margin: 20px 0;
  text-align: center;
}
ul li {
  border: 1px solid #555;
  padding: 10px;
  list-style: none;
  display: inline-block;
}

横並び中央揃えにしているところを最低限抜き出すと以下です。

ul {
  text-align: center;
}
ul li {
  display: inline-block;
}

inline-blockを使うと隙間ができてしまい、margin:0としても隙間は埋まりません。

そこでいくつか対処法があります。

対処法①liタグを横一直線に

HTMLのliタグを横一直線にします。

<ul>
<li>1</li><li>2</li><li>3</li>
</ul>

簡単ですがCMSなどブログシステムでliタグが増えたり減ったりするときに、自動でこういう形にしてくれるかちょっと不安です。

対処法②liタグの閉じタグをなくす

HTMLのliタグの閉じタグを消します。HTML5ではなくてもエラー出ないそうです。

<ul>
      <li>1
      <li>2
      <li>3
      <li>4
      <li>5
</ul>

これも簡単ですが、①と同じ理由とちょっと見栄えがなぁと..。

letter-spacingを使う

CSSのletter-spacingで親要素にマイナス指定をして、liタグにnormalを指定して元に戻します。

ul {
  letter-spacing: -0.4em;
}
ul li {
  letter-spacing: normal;
}

これはCSSで調整するので、CMSによるHTMLの書き出しを気にする必要ないです。
あと簡単。

ただ、letter-spacingはブラウザによって解釈がちょっと違うらしいので、様子見という感じでしょうか

font-sizeを使う

font-size:0を親要素にかけて、子要素で元に戻す方法です。

ul {
  font-size: 0;
}
ul li {
  font-size: 14px;
}

これも③と同様CSSなので、HTMLの書き出しを心配する必要ないですし、Letter-spacingよりも実用的かと思います。

⑤対処しない

隙間なく並べるときは上記の方法でできますが、この記事ではページ送りを想定しています。

ページ送りの要素同士はリンクになるので、marginをとると思います。

なので、きっちりつめる必要がないときは、隙間を利用してしまうのも一つかもしれません。