どうも、べ〜やんです。
今回はCSSでテキストやブロックを中央配置する方法を紹介します。
目次
ブロックとインライン
ブロック要素とインライン要素とでは中央揃えの方法が違うので、まずはブロック要素とインライン要素について少し確認します。
ブロック要素
ブロック要素とは、見出し(h1~h6)、p、div、tableなどがあり改行が入り縦に積まれていくように配置される要素です。後述しますが、vertical-alignが使えません。
インライン要素
インライン要素とは、a、span、imgなどがあり改行が入らず横に並ぶように配置される要素です。vertical-alignが使えます。
左右中央揃え
text-align: center;
インライン要素のテキストを中央揃えするには、親要素のブロック要素にtext-align: center;与えることでできます。
See the Pen vYYWNRb by beeyan (@orientado) on CodePen.
margin: 0 auto;
左右のmarginをautoにして中央配置します。
横幅がないと使用できないので、widthを指定します。
ここでは高さを与えてしまっているので上揃えになっています。
See the Pen xxxPZby by beeyan (@orientado) on CodePen.
display: inline-block;
ブロック要素をインラインブロック要素に変換して、親要素にテキストセンターを与えて中央配置します。
横幅を指定してないので、内容によって可変します。
See the Pen mddqVrJ by beeyan (@orientado) on CodePen.
上下揃え
line-height
line-heightで行の高さを指定すると上下の中央付近にテキストが配置されます。
See the Pen Baamjgw by beeyan (@orientado) on CodePen.
vertical-align
vertical-align: ;を使えるのはインライン要素やテーブルセル要素なので、親要素にdisplay: table;を子要素にはdisplay: table-cell;を与えてvertical-align: middle;を使用しています。
See the Pen ExxbPbr by beeyan (@orientado) on CodePen.
上下左右揃え
line-heightとtext-align: center;など、左右揃えと上下揃えを組み合わせることで上下左右の中央揃えもできます。
その他の方法も紹介します。
position+margin
position: absolute;とmargin: auto;を使用します。
高さを指定する必要と、position: absolute;の位置は全てauto以外に指定する必要があります。
See the Pen qBBVZOO by beeyan (@orientado) on CodePen.
position+負のmargin
position: absolute;でtop,leftを50%ずつ指定、高さと横幅の半分をマイナスのマージンで戻します。
子要素の左上が基準の位置なので、単純にposition: absolute;でtop,leftを50%に指定すると左上が中心にくるのでそこから高さと横幅の半分の距離だけ修正しています。
See the Pen XWWzdNr by beeyan (@orientado) on CodePen.
calc()
理屈は上記のposition+負のmarginと同じです。
calc() 関数で「50%から25px引いた位置」のように指定しています。
See the Pen ZEEaOGW by beeyan (@orientado) on CodePen.
transform
position: absolute;で50%ずつ指定、高さと横幅の50%をtransformで戻します。
子要素(高さ50px、横幅100px)の50%分マイナスしています。
See the Pen gOOXrJd by beeyan (@orientado) on CodePen.
display: flex;
シンプルで要素の幅が自動計算にできるので便利です。
See the Pen QWWOEEW by beeyan (@orientado) on CodePen.
おわりに
今回はCSSでテキストやブロックを中央配置する方法を紹介しました。
上下左右の中央揃えは最初は難しく感じるかもしれませんが、理屈はシンプルなので安心してください。
