CSSでdivやテキストを上下左右(縦・横方向)に中央寄せする方法
- 2019.03.18
- Webスキル
よこのじ(@yokonoji_work)です。
CSSでdivタグや文字を真ん中に表示させたいと思っても、なかなかうまくいかないこともあります(水平方向、垂直方向に自在に中央寄せするのは難しいですね・・・)。
そのたびに、「中央寄せ」「真ん中」「センタリング」といったワードで検索していましたので、この記事で一通りの方法をまとめておきたいと思います。
参考にしてください。
divを中央寄せする
左右(横方向)の中央寄せ
いくつかの方法がありますので、それぞれ確認してみましょう。
margin: auto を使う
divタグを中央寄せするには、margin: auto; を使って左右同じ大きさのマージン領域を作ります。divのようなブロック要素は横幅100%で広がるので、適当な width を指定しています。
このとき、div, pタグのように display の初期値がblockであれば指定不要ですが、そうでないタグの場合は display: block; を指定してください。
.tag-Xcenter{ display: block; margin: 0 auto 0 auto; }
display: inline-block を使う
aタグ、imgタグ、spanタグのような要素は、初期状態ではインライン要素として扱われます。これらは text-align: center; で中央寄せすることができます。
これを利用して、対象の要素にインライン要素のように扱える display: inline-block; を指定します。そのうえで、対象要素の親要素に text-align: center; を指定してください。
.parent{ text-align: center; } .tag-Xcenter{ display: inline-block; }
position: absolute と transform を使う
対象要素に position: absolute; を指定して、left :50% と transform: translateX(-50%); で中央寄せしています。このとき、親要素には position: relative; を指定しておく必要があります。
leftで対象要素の左辺を50%の位置に持ってきて、対象要素のサイズの50%だけマイナス方向にずらす操作をしています。
.parent{ position: relative; } .tag-Ycenter{ position: absolute; left: 50%; transform: translateX(-50%); }
上下(縦方向)の中央寄せ
position: absolute と transform を使う
横方向でやったのと同じように、縦方向の位置をtopから50%の位置に配置しています。横方向と縦方向を合わせることで真ん中に配置できます。
.tag-Ycenter{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
テキストを中央寄せする
左右(横方向)の中央寄せ
テキストを横方向で中央寄せする場合は、text-align: center; をCSSで指定します。テキストを含む要素か、その親要素に対して指定します。画像の場合はimgタグの親要素に指定すると画像も中央寄せできます。
.text-Xcenter{ text-align: center; }
上下(縦方向)の中央寄せ
テキストを縦方向に中央寄せする方法はいくつかあります。
line-height を使う
テキストは、行内の真ん中(縦方向)に表示されます。そのため、行の高さを親要素と同じ高さに指定することで、中央寄せされたように表示できます。
この例では、height: 100px; の青いボックスと同じ高さで line-height を指定しています。
.text-Ycenter{ line-height: 100px; }
しかし、この方法が有効なのは1行で表示する場合だけです。2行目以降の行の高さも同様に指定した値になるため、このようにおかしなことになってしまいます。
display と vertical-align を使う
display: table-cell; を指定すると、要素を表(テーブル)のtd要素のように扱うことができます。そして vertical-align: middle; は、インライン要素やテーブルセルの中で垂直方向に中央寄せできる指定です(ブロック要素には適用できません)。
.text-Ycenter{ display: table-cell; vertical-align: middle; }
この場合は行の高さを変えないので、複数行にしても自然に表示されます。
上下左右の中央寄せ
先ほどdivタグの中央寄せで行った方法をpタグに利用して、要素自体を縦・横方向の真ん中に配置します。
青い四角が親要素で、ここに position: relative; を指定します。「text」という文字が書かれた部分がpタグの子要素です。子要素には position: absolute; を指定したうえで、上と左から50%の位置にpタグを配置しています。
<div class="box"> <p class="text-XYcenter">text<br>text</p> </div> /*親要素*/ .box{ position: relative; width: 100px; height: 100px; background-color: #59c8cf; margin: 0 0 0 0; } /*子要素*/ .text-XYcenter{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: #ffffc1; }
- 前の記事
完全ガイド:Webサイト表示速度の改善・高速化の方法【WordPress対応】 2019.03.11
- 次の記事
CSSアニメーション animationプロパティの使い方 2019.03.20