初心者必見！CSSで中央に寄せる方法6選

CSSを使っていると、誰しも一度は

「CSS　中央　寄せ」

で検索するのではないでしょうか。

ということで今回は、たくさんあるCSSで要素を中央に寄せる方法をまとめてみました。

CSSで左右中央に寄せる方法

text-align: centerで左右中央に寄せる

まずは、インラインの子要素に対して左右中央寄せをする方法です。
このCSSは親要素に対して指定する事で、子要素を中央に寄せることができます。

例えば以下のようなHTMLがあるとします。

margin: 0 autoで左右中央に寄せる

次にブロック要素に対して、左右中央寄せを行う方法をご紹介します。

ブロック要素を中央寄せする際には、

が便利です。

ブロック要素の外側にある左右の余白を均等にしてくれます。それにより要素が中央に寄ります。

ただし、この書き方をする際には、要素の横幅(width)を定めてあげなければいけない点に注意しましょう！

CSSで上下中央に寄せる方法

ここからは、上下の中央寄せを解説していきます。

vertical-align: middleで上下中央に寄せる

インライン要素の上下中央寄せには、vertical-alignを使います。

３つ並べるとわかりやすいのですが、こういう風に要素の上下の位置がバラバラな時に使います。

これに対し、vertical-alignをそれぞれのインライン要素にあてる事で

全ての要素の縦軸を合わせる事ができました。
vertical-alignには他にもtopやbottomなどがあるので、好きな位置で合わせてみましょう。

line-heightで上下中央に寄せる

heightとline-heightを同じ値にすることでも、上下中央にすることができます。
line-heightプロパティは、文字の行間を調節する事ができるので、heightを同じ高さにすることで、上下の隙間の長さを均一にする事ができます。

position: absoluteで上下中央に寄せる

ブロック要素の上下中央寄せには、position:absoluteを使います。

まずは、親要素にposition:relativeをあてて

次に中央寄せしたいブロック要素に対して、position:absoluteをあてtopとleftをそれぞれ50%にします。

ここから、さらにtransformを使います。

こうする事で、子要素の高さと幅の半分だけ戻るように移動します。

少し、他に比べて手間がかかりますが、これでブロック要素も上下中央にすることが出来ます。

まとめ

今回は、CSSでの要素を中央に寄せる方法を６つほど紹介しました。

状況に応じて、なにを使うべきかという事は変わってきますので、全部の方法が使えるように練習してみてくださいね。

この記事があなたの助けになれば幸いです。