【CSS】横幅が可変な要素を中央寄せにする

margin: 0 auto;で中央寄せするためには要素の幅を指定しないといけないので、横幅が可変な場合はこの方法では中央寄せにできません。

inline-blockを使えばできるみたいです。

<div class="pager_wrapper">
  <ul class="pager">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>

.pager_wrapper {
  text-align: center;
}
.pager {
  display: inline-block;
}

中央寄せにしたい横幅が可変な要素を更にdivタグなどで囲い、外側の要素にtext-align: center;を指定します。

中央寄せにしたい要素は、display: inline-block;を指定します。

これで、親要素のtext-align: center;の影響を受けることになり、中央寄せになります。