WordPress初心者の方も、愛用者の方も、
楽しく学べるフォローサイト！

これはですね、、、レスポンシブウェブデザインが定着して以来、私が長い間悩み続けた問題なんです。。。

固定レイアウトの場合は、コンテンツの幅さえ決めれば、中央揃えは下記のようにmarginを設定することで簡単に出来ました。

しかし、レスポンシブを進めていくと、「max-width」とか「min-width」しか設定できないようなケースが出てきます。

基本的に「margin:0 auto;」は、widthで幅を「80%」とか「300px」とか決めてあげないと使えません。

しかしそのwidthを指定できない場合・・・例えば下記のような例です。

これはページネーションを付けたブログの例ですが、このページネーションがうまく中央揃えにできません。なぜか。

ページネーションは記事が増えればその分１，２，３，４，５，６と増えていき、幅も決まりません。

なのでこれを普通に「margin:0 auto;」で設定して中央揃えにしようとすると、明確な幅を持たない要素はmarginで中央揃えにできませんから、このように左揃えになってしまいます。

この問題は、親要素を「text-align:center」という設定をしても変わりません。

一体どうすりゃいいんだ・・・・・

そんなときに便利なCSS設定があったのです。これ！

marginを使用した調整は全て忘れて、上記のように「display:flex」を軸として設定をすると見事に解決できます。

これで幅の決まらないコンテンツも中央揃えになります。下記の画像のように！

そうこれ、これがしたかったんだ・・・・！

私のようにこの問題で多くの時間を費やしている皆様、是非お試しください^^（それともそんなの私だけ？・・・）