CSSで要素を中央寄せする最適な方法とは？インライン・ブロック要素についても解説します
こんにちは。今回はCSSによる、要素を中央に配置させるための様々な方法を解説していきます。
CSSでレイアウトを作っていて、要素を画面の真ん中や親要素に対して真ん中に配置したい場合など様々なケースがあると思いますが、その際命令の特徴を理解していないと「あれ、命令が上手く効かない…」と詰まってしまうことがあります。
実はCSSでは、この命令はこの要素には使える・使えないといったルールが存在しています。
ルールをしっかり押さえて、素早く適切な命令が出せるよう理解を深めていきましょう！
目次
インライン要素とブロック要素
CSSで要素を中央寄せにするためには、まずその要素が「インライン要素」か「ブロック要素」のどちらに該当するのか理解しておくことが大切です。
その理由としては、それぞれの要素によって適用できるプロパティが異なるためです。
| 要素の種類 | 要素の例 | 特徴 |
| インライン要素 | <a>,<img>,<strong>,<span>など | 要素の幅は内容に応じる（改行が発生しない） |
| ブロック要素 | <h>,<p>,<div>,<section>など | 要素の幅は親要素の幅いっぱいに広がっている（改行が発生する） |
インライン要素とブロック要素の大きな違いとしては改行が発生するかどうかです。
以下のサンプルコードでは、spanタグで囲まれたテキストはテキストの分しか背景色がついていないのに対し、pタグで囲まれたテキストは横幅いっぱいに背景色（＝要素）が広がっていることがわかります。
ブロック要素は横幅いっぱいに広がっているため、次に書かれた要素は（CSSで命令しない限り）自動的に下に表示される＝改行が発生するということになります。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
それでは、次からは具体的な命令方法を見ていきましょう！
text-align: center（インライン要素の中央寄せ）
text-align: center; は、テキストやインライン要素を中央寄せする際に使用します。
ブロック要素には適用されませんので注意しましょう。
以下の例では、テキストが中央寄せで表示されていることがわかります。
pタグ自体が中央寄せになっているのではなく、pタグの中身が中央寄せになっていることがポイントです。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
インライン要素を中央に配置することができるため、テキストのほかに<img>タグも中央に配置することができます。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
margin: 0 auto（ブロック要素の中央寄せ）
ブロック要素を水平方向に対して中央配置するためにはmargin: 0 auto;を使いましょう。
ただし、要素が横幅いっぱいに広がっている状態で命令しても見た目には変化がないため、widthを設定した要素に対して命令すると効果的です。
以下の例ではpタグの横幅を80%に設定したことで、親要素（body）に対して横方向に中央配置させています。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
なおこの命令はブロック要素にのみ適用できますが、
インライン要素をブロック要素に変えてしまうことで、結果的にインライン要素にもこの命令を効かせることができます。
インライン要素にはあらかじめ「display:inline」という初期設定がされているため、
「display:block」と命令をすることでブロック要素へ変えることができます。
それを応用して、以下のサンプルコードではaタグでリンクボタンを作成しています。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
display:flex を使う（親要素に適用）
display: flex; を使うことで、親要素の中で子要素を中央に配置できます。
justify-content: center; で水平方向（横方向）・align-items: center; で垂直方向（縦方向）の中央寄せができます。
通常複数の子要素をレイアウトするために使用するケースが多いdisplay:flexですが、子要素が1つの場合でも使える命令です。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
display:flexについて詳しく知りたいという方は以下の記事を参照してください。
もうdisplay:flexで悩まない！初心者向けCSSレイアウト徹底解説
position: absolute + transform
親要素に対してposition: relative;を命令し、子要素に対してposition: absolute; を命令することで、親要素を起点に子要素の配置場所を指定することができます。
その上で、まずは子要素にtop: 50%; left: 50%; の命令を出すことで要素の左上の部分を中央に配置、加えてtransform: translate(-50%, -50%); を適用することで、正確な中央配置が可能になります。
レスポンシブ対応にも便利な命令です。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
positionプロパティについて詳しく知りたいという方は以下の記事を参照してください。
要素を任意の位置に配置するpositionプロパティの使い方【CSS】
position: absolute + calc
もう一つpositionプロパティを使った中央寄せの例をご紹介します。
topやleftなどの起点となる位置からの距離をcalcプロパティを使って設定する方法です。
ポイントは、left・rightの水平方向を指定する場合はcalc(50% – 要素の横幅)とし、
top・bottomの垂直方向を指定する場合はcalc(50% – 要素の高さ)とすることです。
この方法でも上下・左右方向に対して中央に要素を配置することが可能となります。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
まとめ
今回はCSSで要素を中央に配置する様々な命令を紹介しました。
要素によって適用できる命令が異なっていたり、何を真ん中に配置するかによって命令を出す要素が変わったりとややこしい部分も多いですが、違いをしっかり理解して使いこなせるようにしましょう！
STUDIO NNC 合同会社ではコーディングのみなど部分的なお手伝いはもちろん、WEBサイトのコンセプト設計からデザイン、ワードプレス構築まで一貫した制作を得意としております。ご相談がございましたら、お気軽にフォームよりお問い合わせください！
