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

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

「CSS 中央 寄せ」

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

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

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

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

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

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

この時divタグは、spanタグにとっての親要素になります。

この場合divタグに

text-align: center;

をあてる事でspanタグを中央に寄せることができます。

ただし、上下は中央に寄りません。

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

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

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

margin: 0 auto

が便利です。

 

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

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

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

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

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

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

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

これに対し、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での要素を中央に寄せる方法を6つほど紹介しました。

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

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

BLOGコンテンツをパーソナライズします

あなたは現在「プログラミング学習者」ですか?