実例で学ぶ！HTMLで要素を上下中央に配置する方法7選

要素を上下中央に置く作業は、見た目だけでなく読みやすさや操作性にも直結します。特にカード、モーダル、ヒーロー領域、ボタン内のアイコンなどは、少しずれるだけでウェブデザイン全体の印象が崩れます。

そのため、中央揃えは単一の書き方で覚えるより、要素の高さが固定か可変か、親要素に余白があるか、複数行のテキストを扱うかで使い分けるほうが現実的です。CSSのセンタリングには複数の実装パターンがあり、フレックスボックスとグリッドレイアウトを軸に整理すると選びやすくなるのが基本です。

上下中央配置の結論

結論として、単一要素をもっとも短く上下中央へ配置したい場合はdisplayにgrid、place-itemsにcenterを使う方法が扱いやすいです。複数の子要素を横並びや縦並びで制御するなら、display: flex、align-items、justify-contentを組み合わせるフレックスボックスが向いています。

<div class="center-box">
  <p>中央に置きたい内容</p>
</div>

<style>
.center-box {
  min-height: 240px;
  display: grid;
  place-items: center;
  border: 1px solid #d1d5db;
}
</style>

結果: 期待される表示は、枠の内側でテキストが上下方向と左右方向の中央に置かれた状態です。

これを基準に、親要素の高さをmin-heightで確保し、中央に寄せる処理をplace-itemsへ任せると記述量を抑えられます。ただし、古いブラウザ対応や複雑な行方向の制御が必要な画面では、CSSの別案も候補になります。

中央配置で押さえるCSS早見表

中央配置は、親要素、子要素、テキスト行、絶対配置のどこを動かすかで書き方が変わりますし、ここがポイントです。その判断を誤ると、横方向は合っているのに上下だけずれる、スマートフォン幅でカードがはみ出す、といった問題につながります。

具体的には、displayでレイアウト方式を決め、align-itemsやjustify-contentで軸方向をそろえます。テキストだけならtext-alignやline-heightも候補になりますが、複数行や可変高さでは別のCSS設計が必要です。

この表の要点は、中央に見せたい対象が文字なのか、箱なのか、複数要素のまとまりなのかを先に切り分けることです。対象が決まれば、CSSの候補は自然に絞られます。

フレックスボックスで上下中央に配置する

フレックスボックスは、親要素の中で子要素を横方向または縦方向に並べながら中央へ寄せたい場面に向いています。display: flexを親へ与えると、子要素はフレックスアイテムとして扱われ、justify-contentとalign-itemsで配置の軸を調整できるのが目安です。

そのとき、初期状態ではflex-direction: rowのため、justify-contentが横方向、align-itemsが上下方向を制御します。縦並びに切り替えると軸の意味が入れ替わるため、中央にならない原因を探す際は主軸を確認すると整理しやすいです。

<div class="hero">
  <div class="hero-card">中央のカード</div>
</div>

<style>
.hero {
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
}
.hero-card {
  padding: 24px 32px;
  background: #ffffff;
  border: 1px solid #d1d5db;
}
</style>

結果: 期待される表示は、薄い背景の領域内で白いカードが上下左右の中央に配置された状態です。

これにより、カードの高さが少し変わっても中央配置は保たれます。一方、親要素に高さがない場合は上下方向に寄せる余白そのものがないため、min-heightやheightで基準を作る必要があります。

💡 Tips: フレックスボックスの仕様は、MDNのCSS flexible box layoutで確認できるのがポイントです。軸の考え方を押さえると、上下中央と横中央の混同を避けやすくなります。

グリッドレイアウトで短くセンタリングする

グリッドレイアウトは、単一の子要素を中央へ置くときに記述が短くなります。place-items: centerはalign-itemsとjustify-itemsをまとめて扱うため、上下中央と左右中央を同時に整えられますが、これは押さえたい点です。

この書き方は、ログイン画面、空状態メッセージ、読み込み中の表示など、中央に一つのまとまりを置くUIと相性がよいです。ただし、子要素を複数並べて間隔を調整する場合は、gapやgrid-template-rowsも合わせて設計します。

<main class="empty-state">
  <section class="empty-panel">
    <h2>データがありません</h2>
    <p>条件を変えて再検索してください。</p>
  </section>
</main>

<style>
.empty-state {
  min-height: 60vh;
  display: grid;
  place-items: center;
}
.empty-panel {
  max-width: 420px;
  padding: 28px;
  text-align: center;
}
</style>

結果: 期待される表示は、画面の高さに対してメッセージ領域が中央に収まり、テキストも横中央にそろう状態です。

その短さから、CSSのセンタリングで迷ったときの候補になりやすい書き方です。グリッドレイアウトの詳細は、MDNのCSS grid layoutにも整理されています。

margin autoで横中央に寄せる

横方向だけ中央に配置したい場合は、margin-inline: autoが自然です。ブロック要素にmax-widthやwidthを持たせ、左右の余白を自動にすると、親要素の中で左右中央に収まります。

ただし、この方法だけでは上下中央にはなりません。記事本文のコンテナ、フォーム、表のラッパーのように、横幅を読みやすく制限するウェブデザインで使うと効果が分かりやすいです。

<article class="content-wrap">
  <h2>本文見出し</h2>
  <p>読みやすい幅で中央に置かれた本文です。</p>
</article>

<style>
.content-wrap {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: 20px;
}
</style>

結果: 期待される表示は、本文コンテナが画面の左右中央に置かれ、狭い画面では内側余白が残る状態です。

この方法は、上下の配置を別のCSSへ分けられる点も扱いやすいです。横中央はmargin-inline、上下の余白はpadding-blockやmin-heightで管理すると、役割が混ざりにくくなります。

positionとtransformで重ねる中央配置

重ね合わせのUIでは、positionとtransformを組み合わせたセンタリングが候補になります。親にposition: relative、子にposition: absoluteを置き、top: 50%とleft: 50%からtranslateで自身の半分を戻するのが一般的です。

このとき、50%は親要素を基準にした位置です。子要素の左上が中央に来るだけでは見た目がずれるため、transform: translate(-50%, -50%)で子要素の中心点を合わせます。

<div class="photo-frame">
  <img src="sample.jpg" alt="サンプル画像">
  <button class="play-button" type="button">再生</button>
</div>

<style>
.photo-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

結果: 期待される表示は、画像の中央に再生ボタンが重なって配置された状態です。

その一方で、通常の文書フローから外れるため、周囲の要素との関係は慎重に見ます。モーダルや画像上のボタンには向きますが、本文内カードの上下中央にはフレックスボックスやグリッドレイアウトのほうが扱いやすい場面が多いでしょう。

line-heightで一行テキストを上下中央にする

一行だけのテキストを高さ固定のボタンやラベル内で上下中央に見せるなら、line-heightを使う方法があります。要素のheightとline-heightを同じ値にすると、行ボックスが中央に近い位置へ収まります。

ただし、テキストが折り返す可能性があるUIには向きません。複数行になると行間が過剰になりやすいため、フレックスボックスでalign-items: centerを使う設計へ切り替えますし、これが一つの目安です。

<a class="label-button" href="/web/2624/">問い合わせ</a>

<style>
.label-button {
  display: inline-block;
  height: 44px;
  line-height: 44px;
  padding-inline: 20px;
  background: #111827;
  color: #ffffff;
  text-decoration: none;
}
</style>

結果: 期待される表示は、黒いボタン内で一行の文字が上下中央に見える状態です。

この方法は、古いUI部品を扱うときに見かける場合があります。新しく作るボタンではdisplay: inline-flex、align-items: center、justify-content: centerを組み合わせるほうが、アイコン付きの配置にも対応しやすいです。

テーブルセルのvertical-alignを使う場面

表のセル内で上下中央にそろえる場合は、vertical-align: middleが使えます。これは通常のブロック要素全般を中央へ動かすためのCSSではなく、表セルやインライン要素の縦方向のそろえ方に関係すると整理できます。

一般に、ページ全体のレイアウトをdisplay: tableで組む方法は採用しにくくなっています。表データにはtable構造を使い、画面レイアウトにはフレックスボックスやグリッドレイアウトを使うと役割が明確です。

<table class="status-table">
  <tr>
    <td>状態</td>
    <td><span class="badge">公開中</span></td>
  </tr>
</table>

<style>
.status-table td {
  height: 56px;
  vertical-align: middle;
  border-bottom: 1px solid #e5e7eb;
}
.badge {
  display: inline-block;
  padding: 4px 10px;
}
</style>

結果: 期待される表示は、表のセル内で文字とバッジが縦方向の中央にそろう状態です。

この使い分けを誤ると、ウェブデザインの保守性が下がります。表はデータの関係性を示す構造、CSSレイアウトは要素の配置を決める仕組みとして分けて考えるとよいです。

画面全体で中央に置くヒーロー領域

ヒーロー領域を画面中央に置く場合、min-height: 100vhやmin-height: 100svhで高さを確保します。そのうえで、グリッドレイアウトまたはフレックスボックスを使うと、上下中央の配置を維持できると理解できます。

ただし、スマートフォンではブラウザのアドレスバーにより表示領域が変わります。画面いっぱいのウェブデザインでは、100vhだけに頼らず、必要に応じて100svhや余白の調整を検討します。

<section class="main-visual">
  <div class="main-copy">
    <h1>サービス名</h1>
    <p>画面中央に置いたコピーです。</p>
  </div>
</section>

<style>
.main-visual {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 32px;
  background: #eef2ff;
}
.main-copy {
  max-width: 640px;
  text-align: center;
}
</style>

結果: 期待される表示は、画面の中央にコピー領域が置かれ、狭い画面でも周囲に余白が残る状態です。

これにより、ファーストビューの印象を保ちながら、文字が端に張り付く問題を避けられます。一方で、次のセクションがまったく見えない設計ではスクロールの存在に気づきにくくなるため、実際の画面構成では高さと余白のバランスを調整します。

画像やアイコンを中央に配置する考え方

画像を枠内の中央に見せたいときは、画像そのものの配置と、画像の切り抜き位置を分けて考えますが、覚えておくと役立つでしょう。要素として中央に置くならdisplay: blockとmargin-inline: auto、枠内で見える位置を整えるならobject-fitとobject-positionを使います。

アイコンと文字を並べるボタンでは、inline-flex、align-items: center、gapがよく合います。これにより、アイコンだけが上下にずれる状態を避けやすくなると覚えるとよいでしょう。

<button class="icon-button" type="button">
  <span aria-hidden="true">✓</span>
  <span>保存</span>
</button>

<style>
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding-inline: 16px;
}
</style>

結果: 期待される表示は、チェック記号と文字が同じ高さの中央にそろったボタンです。

このような小さなずれは、画面全体の完成度に影響します。特にフォーム送信、カレンダー、スライドショーなど操作を伴うUIでは、中央揃えの精度が操作の分かりやすさにつながります。

うまく中央にならない原因

中央にならない原因の多くは、親要素の高さ不足、軸の取り違え、余白の混在です。上下中央にするには上下方向の空間が必要であり、親の高さが内容分しかない場合は中央へ寄せる余地がありません。

そのため、min-height、padding、box-sizing、borderの関係を確認すると考えられます。box-sizing: border-boxを使うと、幅や高さに内側余白と枠線を含めて計算でき、レイアウトの見通しがよくなります。

一方、フレックスボックスではflex-directionを変えるとjustify-contentの方向も変わります。横並びのつもりで書いたCSSを縦並びに流用すると、配置の効き方が変わるため注意が必要です。

内部リンクで理解を広げる配置の周辺知識

中央配置の理解は、周辺の要素設計と組み合わせると実務的に使いやすくなります。たとえば、ページ内移動を含むナビゲーションではアンカーリンクの作り方を押さえると、固定ヘッダー下の配置ずれも考えやすくなるのが基本です。

その応用として、日付選択UIを作る場合はカレンダーの作成と更新でセル内の中央揃えが関係します。サムネイルやキャプションを含むUIでは、スライドショーの実装でも画像の中央表示やボタン配置が必要です。

これらの画面では、構造を正しく組むことも欠かせません。親子関係の理解にはツリー構造の基礎が役立ち、入力欄や送信ボタンをそろえる場面では問い合わせフォームの作成も参考になります。

使い分けの実践指針

実装パターンとしてよく見るのは、単一要素ならグリッドレイアウト、複数要素ならフレックスボックス、横幅制限ならmargin-inline: autoという分け方です。これだけで、多くの中央配置は無理なく整理できるのが目安です。

ただし、すべての場面を一つのCSSで済ませようとすると、後から微調整が難しくなります。ウェブデザインでは、要素の役割、親要素の高さ、テキスト量、レスポンシブ時の折り返しを合わせて見る必要があります。

具体的には、ボタン内のアイコンはinline-flex、画面中央の空状態はplace-items、本文コンテナはmax-widthとmargin-inline、重ねるボタンはpositionとtransformという判断になるのがポイントです。CSSのセンタリングは、見た目を合わせる作業であると同時に、構造の意図を明確にする作業でもあります。

そのうえで、中央揃えが崩れた場合は、親の高さ、主軸、余白、ボックスサイズの順に確認します。この順番で見ると、上下中央にできない原因を切り分けやすく、配置の修正も局所的に済みますし、ここを基本と考えるとよいでしょう。

関連記事

• 『HTMLでアンカーリンクを活用する方法10選
• HTMLとJSを使ってカレンダーを作成・更新する方法10選
• HTMLとCSSで手軽に作るスライドショーコピペ12選
• HTMLとツリー構造をマスターする！初心者からプロまでわかる7つの完全ガイド
• HTMLで問い合わせフォームを作成する方法5選！

※本記事は実在のエンジニア複数名で構成される Japanシーモア編集部が、AI支援を活用して作成・校正・公開しています。