margin: 0 auto; で左右は中央揃えできるのに、上下がまったく動かない…
vertical-align: middle; を指定してもピクリとも反応しない…
Web制作を始めた人が必ずと言っていいほど直面するのが、「要素を上下左右の中央に配置する」問題です。
検索して試行錯誤をするうちに解決できますが、理解のないまま進めるとレイアウトの崩れにつながってしまいます。
そこで、この記事では、中央揃えを実装する3つの方法を具体的なコード例とともに比較し、それぞれの得意分野や使いどころを分かりやすく解説します。
中央揃えにする方法で困っている方は、参考にしてください。
※本記事の内容は2025年8月23日時点のものです。本記事で紹介したツール・機能を利用する際には、必ず最新情報をご確認ください。
【全体像を確認】CSSの中央揃えはFlexbox・Grid・Positionの3択！
CSSで要素を上下左右の中央に配置する方法はたくさん紹介されていますが、実際には「Flexbox」「Grid」「Position」の3種類を押さえておけば、大体の場面は実装できます。
それぞれの特徴を早見表にまとめました。
| 方法 | 特徴 | コード量 | 主な場面 |
|---|---|---|---|
| Flexbox | 一次元レイアウト（横方向・縦方向どちらか）に強い | 最低3行 | ナビゲーション、カードリスト |
| Grid | 二次元レイアウト（縦＋横を同時に扱える） | 最低2行 | 単純な中央揃え、サイト全体の骨格 |
| Position | 通常の配置ルールを無視して要素を自由に置ける | 最低5行 | モーダル、重ね合わせテキストなど |
この3つの使い分けとしては、次の順番で考えるのがおすすめです。
→ シンプルに中央揃えしたいなら、少ないコードで書けるGridがおすすめ
2.要素を横並び・縦並びで整列したいならFlexbox
→ 例えば「ナビゲーションメニュー」「カード一覧」などはFlexboxが便利
3.通常のルールを無視した配置をするならPosition
→ モーダルウィンドウや重ねテキストなどの場合はPositionが役立つ
実装したいものに合わせて、どれが適しているのかを考えて選択してください。
中央揃えにする3つの方法をそれぞれ解説
ここからは、中央揃えにする3つの方法を解説します。
方法1：Flexboxで中央揃えする
Flexboxは、その名の通り「柔軟なレイアウト」が得意です。
本来は要素を横並びに整列させる用途でよく使われますが、上下左右の中央揃えも実現できます。
「スペースが余れば自動で伸びる」「スペースが足りなければ縮む」といった、アイテムの大きさや状況に応じて自動で調整することができます。
Flexboxの基本的な考え方は「1次元のレイアウト」。横方向か縦方向のどちらか一方向に沿って、アイテムを整列させるのが得意です。
.parent {
display: flex; /* Flexboxを有効化 */
justify-content: center; /* 水平方向の中央揃え */
align-items: center; /* 垂直方向の中央揃え */
}
上記のように表記することで、上下左右の中央揃えが実現できます。
方法2：Gridで中央揃えする
Gridは、縦と横の両方を同時に扱える「二次元レイアウト」が得意です。
Flexboxが「線」のように一方向の整列に向いているのに対し、Gridは「面」としての配置をコントロールできます。
そのため、ページ全体のレイアウトを区切ったり、要素を格子状に整理したりするのに最適です。
.parent {
display: grid; /* Gridを有効化 */
place-items: center; /* 上下左右まとめて中央揃え */
}
このように、Flexboxでは3行必要だった記述が、Gridなら2行で済みます。
方法3：Positionで中央揃えする
PositionはFlexboxやGridのように、レイアウトの流れに従って整列させる方法とは考え方が大きく異なります。
レイアウトを無視して、要素を好きな場所にピンポイントで配置できるのが最大の特徴です。
例えば、モーダルウィンドウを画面中央に出す、ボタンを右下に固定する、画像の上にテキストを重ねるなどの場面でよく使われます。
「起点」となる親要素にposition: relative;を、「動かしたい」子要素にposition: absolute;を指定し、親要素を基準に配置を決めるのが基本です。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
「top: 50%; left: 50%;」だけでは、本当に中央に配置されたとは言えません。
そこで「要素自身の幅の半分だけ左に」「要素自身の高さの半分だけ上に」移動させるために、「transform: translate(-50%, -50%);」を指定して、上下左右で中央揃えになるようにしています。
まとめ：中央揃えは3つの方法を使い分ければ迷わない
CSSで上下左右の中央揃えを実現する方法は数多く紹介されていますが、押さえておきたいのは「Flexbox」「Grid」「Position」の3つです。
- Flexbox：横並びや縦並びなど「一次元の整列」が必要なときに最適
- Grid：最低2行とシンプルに書けるのが特徴
- Position：モーダルやポップアップなど「重ねる・固定する」場合に活躍
この3つの書き方を理解して、中央揃えの指定にかける時間を減らしましょう。
未経験からWeb制作を学ぶならデイトラWeb制作コースがおすすめ！
デイトラ情報局は、1日1題のステップでWebスキルを身につけられる”デイトラ”を運営しています。
デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。
HTML/CSSやjavaScriptを始めとした言語の基本からデザインカンプをもとにしたコーディング、WordPressのオリジナルテーマ作成まで、学習カリキュラムはなんと100日分！Web制作を網羅的に学べます。
また、中級・上級の最終課題はメンターによる課題レビューつき！品質を現場目線でチェックしてもらえるため、「自分は今どのくらいのスキルがあるのか」が客観的にわかります。
Discordによる公式サポートの質問部屋も用意。実務を経験しているメンター陣があなたの疑問に回答してくれます。
Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください！
はにわまんさん（@haniwa008）
Webコーダー。コーディングを中心にディレクションからサイト運用・保守まで、Web制作全般の仕事に400件以上携わった経験あり。デイトラのマネージャーも務めている。