CSSによる左右・上下の中央寄せ
なぜこの記事を書いた？
CSSで中央寄せする9つの方法（縦・横にセンタリング）でCSSによって要素中央寄せする方法を学んだので忘備録としてまとめなおしました。
実際にやりたい操作、配置する対象となる要素のHTMLの構造に着目して分類しなおしました。
分類方法
配置方法
- 左右方向の中央寄せ
- 上下方向の中央寄せ
- 中心配置
配置する要素のHTML構造
- 素の文章
spanタグなどで囲まれず直接p要素やdiv要素などblockの中に記載されている文 - inline（1行）
- inline（複数行可）
- 画像
- block
配置を実現する際に用いるCSSプロパティ
左右方向
text-align: center;margin: 上下 auto;
上下方向
line-height: 親要素の高さ;position: absolute;
中心配置
display: flex;
適用の可能・不可能一覧
| 素の文 | inline （1行） | inline （複数行可） | 画像 | block | ||
|---|---|---|---|---|---|---|
| 左右 | text-align | o | o | o | ||
| margin | o | |||||
| position: absolute; | o | o | ||||
| 上下 | line-height | o | ||||
| position | o | o | o | o | ||
| 中心 | display: flex; | o | ||||
注意点
- 配置は親要素を基準に行われる
text-align: center;は配置したい要素の親要素に指定する必要がある- 配置したい要素に
position: absolute;を指定する場合はその親要素のpositionプロパティもstatic以外のものを指定しておく必要がある - 親要素が
a要素などinlineの場合は上手くいかないのでその親要素にdisplay: block;を指定しておく必要がある
所感
とりあえずは文章を左右中央寄せするのに必須であるtext-alignと様々な要素に適用できるposition: absolute;の使い方を覚えておけば良いように思いました。ただ、これらは配置する要素とその親要素の両方にstyleを指定する必要があったり、そもそも記述量が多いなどデメリットもあります。
それらを回避したい場合はmarginやflexboxも合わせて使えば良いと思います。
使い分けが難しいですね。
本当は各プロパティを用いる例も載せるつもりでしたが力尽きたのでとりあえずここまでにしておきます。
