CSSで文字や画像を中央配置する方法
CSSで、文字や画像を、中央配置する方法
サルワカさんのブログに、「CSSで中央寄せする9つの方法（縦・横にセンタリング）」が、詳しく説明されています。
https://saruwakakun.com/html-css/basic/centering
すぐに思い出せるように、要点を抜き書きしました。
【css 中央配置】 横 中央寄せ
文章は「text-align:center」で中央寄せ。
画像は親要素に「text-align:center」を指定して横センタリング。
pタグなどのdisplay: blockの要素に対しては、text-alignは適用されない。
p、h1、〜h6 などのタグは、displayの初期値がblock。
display:blockの要素に対しては、margin-leftとmargin-rightのそれぞれの値をautoにすることで水平方向に中央寄せ。
（このとき、「親要素の幅を基準に中央寄せとなっている」 「親要素自体を中央配置にする必要がある」ことも。）
ブロックの要素はmarginを活用して左右中央寄せ。
このとき親要素の幅まで要チェック。
display: inline-blockを指定した要素は「ブロック」と「インライン」の中間のような扱いが可能。
ブロックのように幅指定もできる。
インラインのようにtext-align指定もできる。
初期値でinline-blockを取るような要素はないので、自分で指定すること。
ブロックの要素をinline-blockに変えてから、親にtext-align:centerを使えば簡単に中央寄せできる
【css 中央配置】縦 中央寄せ
改行のない文を縦にセンタリングするときは、line-heightを親要素のheightに合わせる。
親要素に position:relative を指定しておく
センタリングしたい要素を絶対配置 （position:absolute） に
top: 50% で親要素から上から50%の位置に
transform: translateY(-50%) でズレを補正
絶対配置（position: absolute）と
top: 50% と
transform: translateY(-50%)で
要素を親要素の縦中央に配置できる
親要素をrelativeにすることを忘れずに！
【css 中央配置】縦横 中央寄せ（中心に配置）
absolute + top: 50% + left: 50% + transform: translate(-50%,-50%)で親のど真ん中に配置できる
flexbox で、ど真ん中に配置する。
親要素にdisplay: flexに加える。
justify-content: center、align-items: centerを指定する。
画像の上、ど真ん中に配置する。
画像の上におしゃれに文字やボタンをのせる方法（CSS）
円のど真ん中に配置したいとき「1行以内の文字ならline-heightを円のheightに合わせる」、「2行以上になりそうならabsoluteを活用」
【css 中央配置】中央寄せができないときのチェック項目
text-align:centerが効かない
ブロック要素になっていませんか？
親要素に対して指定していますか？
margin: 0 autoが効かない
インライン要素になっていませんか？
親要素の幅が小さくなっていませんか？
position: absoluteができない
親要素はrelativeになっていますか？