🎨【CSS】中央揃えができないときの解決パターン集 ― 2026年版
この記事で解決すること CSSで何かを「真ん中に置きたい」だけなのに、なぜかうまくいかない。 text-align: center; /* 効かない… */ margin: auto; /* これも効かない… */ 中央揃えはCSSで最も検索される悩みの1つです。パターンごとに「これを使えばOK」という正解を整理しました。 パターン1: テキストを中央揃え <p class="center-text">このテキストを中央に</p> .center-text { text-align: center; } これは素直に動きます。テキストや inline 要素（画像など）の水平方向の中央揃えはこれでOK。 パターン2: ブロック要素を水平方向に中央揃え div などのブロック要素を中央に置きたい場合。 <div class="center-box">中央に置きたいボックス</div> .center-box { width: 300px; /* 幅の指定が必要 */ margin-left: auto; margin-right: auto; } ポイントは width を指定すること。幅が決まっていないと margin: auto は効きません。 ブロック要素とは、div や p のように横幅いっぱいに広がる要素のことです。 パターン3: 上下左右ど真ん中（最も使う） ページやコンテナの中で、要素を完全に中央に置きたい場合。2026年の正解はこれです。 <div class="container"> <div class="centered">ど真ん中</div> </div> .container { display: flex; justify-content: center; /* 水平方向 */ align-items: center; /* 垂直方向 */ height: 100vh; /* 画面の高さいっぱい */ } flexbox は要素の配置を柔軟に制御できるCSSの仕組みです。中央揃えに限らず、レイアウト全般で使います。 ...