CSSCSSで要素を中央寄せにする方法を徹底解説ナナミ2018/6/12019/7/31こんにちは!ライターのナナミです。要素を中央に寄せる方法が知りたい...ということですね。悩ましいですよね、中央寄せ。上下の中央に寄せる方法はうまくいかないことも多いですよね。そんなお悩みもバッチリ解決、要素の中央寄せについて解説していきます。今回の構成はこんな感じです。まとめ寄せたい要素の種類を確認しよう要素を中央に寄せたい時、最初に確認することがあります。その中央寄せしたい要素が、インライン要素なのか、ブロック要素なのか、インラインブロック要素なのかです。インライン要素とは、文章などの一部となる要素ですね。高さの指定などができませんが、勝手に横並びになってくれます。ブロック要素は、コンテンツのひとかたまりとなる要素です。高さなど自由に指定できますが、横並びにならない要素ですね。インラインブロック要素はインライン要素とブロック要素のいいとこ取り要素です。それぞれの特徴を持っていて、とっても便利なパーツになってくれますね。この中のどの要素なのかによって、中央寄せにする方法が違うのです。「そもそもブロック要素とかよくわからない」という方は、まずは下記の記事から読んでみてください。2018年11月26日では、それぞれどのように中央寄せにするのか、細かく見ていきましょう。左右中央に寄せるまずは左右中央に寄せる方法です。インライン要素、ブロック要素ごとに見ていきましょう。インライン要素の場合インライン要素を中央寄せにする場合は、中央寄せにしたい要素の親要素にtext-align:centerをつけます。*/}text-alignは文章の揃え位置を指定するプロパティです。インライン要素は文章内に入る要素とされているので、これでコントロールが効くわけですね。*/}いい感じに中央揃えにしてくれます。text-alignのリファレンスはこちらhttp://www.htmq.com/style/text-align.shtmlブロック要素の場合ブロック要素にはtext-alignは効きません。autoを指定します。*/}marginは要素の外側の余白を指定するプロパティですね。autoを指定すると、余白を自動的に計算してくれるので、このように中央に寄せた状態にしてくれます。最初を0にしているのは、上下には余白が必要ないからです。0と書いても上下中央揃えにはなりません、あしからず。インラインブロック要素の場合インラインブロック要素は、インライン要素とブロック要素、それぞれのいいとこ取りですね。今回のような場合は、インライン要素と同じ動きになります。text-align:centerでOKです。*/}上下中央に寄せるでは次に、上下中央に寄せる方法です。上下中央と言っても、どこを基準に上下中央するのかがポイントになります。それもふまえて、細かく見ていきましょう。インライン要素の場合インライン要素の上下中央寄せは、隣同士の要素を基準にします。こんな風に横に並んでいる要素を、中央に揃えて配置する感じですね。中央寄せにしたい要素自体にvertical-align:centerを指定します。