【CSS】要素を左右中央にする4つの方法【コーディング】

見出しや文章､画像等､要素内のものを左右中央に配置できます｡
背景色をつけるとどのように左右中央に配置されているかわかりやすいと思います｡

注意点

よくランディングページとかワンカラムの縦長サイトだと､パッとデザイン見た感じ見出しやリード文が中央揃えになっていて､いきなりbodyとか階層の上のほうや､pタグに直接「text-align:center;」を指定してしまうことがあります｡
よくよくコーディングしていくと意外とコンテンツの内では左寄せだったりして､ことごとく打ち消していかないといけないことがあります｡
「text-align:center;」はclassに指定していくか､必要な要素を見極めてて指定していったほうがいいと思います｡

「text-align:center;」と違って､親要素に指定して､子要素を左右中央に配置します｡
画像の場合は「display:block;」の指定も必要です｡

最低表示幅のあるレイアウトのときによく使いますが､今後は「display:flex;」でもいいかもしれません｡

注意点

一般的に左右中央は「margin: 0 auto;」と覚えてしまいますが､上下にmarginがある場合は､「margin-left: auto; margin-right: auto;」と書いておいたほうがいい場合があります｡
レスポンシブコーディングでブレイクポイントごとにmargin-bottomのみを変更するような場合はこうしたほうがいいと思います｡

「display: flex;」は左右中央だけでなく､上下中央にも便利に使えます｡

注意点

「flex-direction」のデフォルトは「row」(横並び)なので基本は横並びなので､「justify-content: center;」が左右中央なのですが､「flex-direction」を「column」「column-reverse」(縦積み)に変更した場合は､「align-item: center;」が左右中央になります｡
左右と上下のプロパティが入れ替わるので注意が必要です｡

親要素に「position: relative;」を指定し､子要素が全部「position: absolute;」だと高さがなくなってしまうので高さを指定しないといけません｡

左右中央限定であれば「left: 0;」「right: 0;」も必要です｡上下も追加すれば上下左右中央になります｡

注意点

規則性のない複雑なデザイン以外では､できるだけ使わないほうがいいと思います｡

左右中央は比較的簡単にできますが､上下中央､左右上下中央になると難易度が上がていきます｡