KAKERU Designing トミー（末富将也）

ど真ん中に置くCSS｜flex・grid・align-contentで縦も横も中央寄せ、コピペで使える4種類

display: grid と place-items: center で見出しを箱の真ん中に置いた見本とコード

ボタンの中のアイコンと文字、告知の枠の中の見出し、動画のサムネイルの上の再生ボタン。「この中のど真ん中に置きたい」はWEB制作で何度も出てきます。今のCSSなら、ほとんどが2〜3行で書けます。

使いどころの結論は、「中身が1つのまとまり」で「箱の高さに余裕がある」ときです。横に並べるなら flex、まとまりを置くなら grid、画像の上に重ねるなら position。長い文章をまるごと真ん中にそろえる使い方はしません。

この記事の要点

  • display: flex＋justify-content: center＋align-items: center、または display: grid＋place-items: center で、縦も横も真ん中に置ける
  • 使いどころは、ボタンの中・告知の枠・画像の上の再生ボタンなど、中身が短いまとまりのとき。横並びは flex、まとまりは grid、重ねるなら position
  • 箱の高さは固定せず min-height にする。中身が増えたときに上下がはみ出して読めなくなるため
トミー

連載「WEBの技術」の56回目です。
今回は「ど真ん中に置く」方法です。昔はかなり面倒でしたが、今は迷ったらこの記事の4つのどれかで足ります。

完成見本：真ん中に置く4種類

どの見本も、左が「指定なし」、右が「指定あり」です。箱の大きさが自動でゆっくり変わっています。右は、箱が広くなっても狭くなっても、中身がずっと真ん中にあります。

FLEX1. アイコンと文字を真ん中にボタン・バナーの中に
GRID2. まとまりごと真ん中に見出しと文の組・告知の枠に
ALIGN-CONTENT3. 文章の箱を縦だけ真ん中にお知らせ・空っぽの欄に
POSITION4. 画像の上のボタンを真ん中に動画のサムネイル・画像の上に

※ 見本は読み上げソフトでは読まれないようにしています。動きを減らす設定にしている方には、止まって見えます。箱の大きさが変わる動きは見本だけのもので、コピペ用のコードには入っていません。

コピペ用のコード

CSSは、サイトのCSSファイルや、WordPressならテーマの「追加CSS」などに入れます。クラス名の頭の kd-ct は、サイトのほかのデザインと名前がぶつからないようにするための目印です。4つとも、同じ「見本の箱」に指定を足しています。

1. アイコンと文字を真ん中に

箱に display: flex を付けると、中のアイコンと文字が横に並びます。justify-content: center で横の真ん中、align-items: center で縦の真ん中です。アイコンと文字の高さもそろいます。

HTML
<div class="kd-ct-box kd-ct-flex">
  <svg class="kd-ct-icon" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg>
  <span>ご予約はこちら</span>
</div>
CSS
/* 見本の箱（4つで共通） */
.kd-ct-box {
  min-height: 160px;       /* 高さは固定しない */
  padding: 12px;
  border: 1px solid #CBD5E1;
  border-radius: 10px;
  background: #fff;
}
.kd-ct-box p {
  margin: 0;
}
.kd-ct-flex {
  display: flex;
  justify-content: center;  /* 横の真ん中 */
  align-items: center;      /* 縦の真ん中 */
  gap: 8px;                 /* アイコンと文字のすき間 */
  color: #0369A1;
  font-weight: 700;
}

2. まとまりごと真ん中に

display: grid と place-items: center の2行です。place-items は、縦と横の位置を一度に決める書き方です。見出しと文を1つの div でまとめておくと、まとまりごと真ん中に来ます。

HTML
<div class="kd-ct-box kd-ct-grid">
  <div>
    <p class="kd-ct-title">秋の相談会</p>
    <p>11/23（月・祝）</p>
  </div>
</div>
CSS
/* 見本の箱（4つで共通） */
.kd-ct-box {
  min-height: 160px;       /* 高さは固定しない */
  padding: 12px;
  border: 1px solid #CBD5E1;
  border-radius: 10px;
  background: #fff;
}
.kd-ct-box p {
  margin: 0;
}
.kd-ct-grid {
  display: grid;
  place-items: center;  /* 縦も横も真ん中 */
  text-align: center;   /* 文字の行も真ん中に */
}
.kd-ct-title {
  font-size: 1.2em;
  font-weight: 700;
}

3. 文章の箱を縦だけ真ん中に

flex や grid に切りかえず、ふつうの箱のまま align-content: center を付けます。2024年から主なブラウザで使えるようになった書き方で、中の段落や余白の付き方は今までどおりです。

HTML
<div class="kd-ct-box kd-ct-block">
  <p>準備中です。<br>公開までお待ちください。</p>
</div>
CSS
/* 見本の箱（4つで共通） */
.kd-ct-box {
  min-height: 160px;       /* 高さは固定しない */
  padding: 12px;
  border: 1px solid #CBD5E1;
  border-radius: 10px;
  background: #fff;
}
.kd-ct-box p {
  margin: 0;
}
.kd-ct-block {
  align-content: center;  /* ふつうの箱のまま、縦の真ん中 */
  text-align: center;     /* 横は文字の真ん中そろえで */
}

4. 画像の上のボタンを真ん中に

画像の上に重ねる部品は position: absolute で置きます。inset: 0 で上下左右を0にして、幅と高さを決め、margin: auto にすると、ちょうど真ん中に止まります。

HTML
<div class="kd-ct-box kd-ct-media">
  <button class="kd-ct-play kd-ct-center" type="button" aria-label="動画を再生">
    <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path d="M8 5.5v13l11-6.5z" fill="currentColor"/></svg>
  </button>
</div>
CSS
/* 見本の箱（4つで共通） */
.kd-ct-box {
  min-height: 160px;       /* 高さは固定しない */
  padding: 12px;
  border: 1px solid #CBD5E1;
  border-radius: 10px;
  background: #fff;
}
.kd-ct-box p {
  margin: 0;
}
.kd-ct-media {
  position: relative;     /* ここを基準にする */
  background: linear-gradient(135deg, #7DD3FC, #0369A1);
}
.kd-ct-play {
  position: absolute;
  display: grid;
  place-items: center;    /* 三角を丸の真ん中に（2と同じ） */
  width: 56px;
  height: 56px;
  padding: 0 0 0 3px;     /* 三角は少し右へ（見た目の真ん中） */
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #0369A1;
}
.kd-ct-center {
  inset: 0;               /* 上下左右を0に */
  margin: auto;           /* 残りを均等に分ける */
}

4は、実際に押せる見本も置いておきます。キーボードなら Tab キーでボタンに移動できます（押しても何も起きません）。

仕組み：真ん中に置くには「箱」と「中身」の両方が要る

横の真ん中と、縦の真ん中は別のもの

真ん中に置く指定は、どれも「親の箱」に書いて「中身」を動かします。そして、横と縦は別々の指定です。flex なら justify-content が横、align-items が縦です（横に並べる、ふつうの使い方の場合）。片方だけ書くと、こうなります。

place-items は2つをまとめた書き方

grid の place-items: center は、align-items: center（縦）と justify-items: center（横）を1行にまとめた書き方です。中身が1つなら、flex と見た目はほぼ同じになります。違いは、中身が2つ以上あるときです。flex は横に並び、grid は縦に積み重なります。

縦の真ん中には、箱の高さが要る

縦の真ん中に置けるのは、箱の高さが中身より大きいときだけです。高さを何も決めていない箱は、中身の高さにぴったり縮むので、縦には動く余地がありません。見本では min-height: 160px で高さを作っています。

4の inset と margin: auto

inset: 0 は、top・right・bottom・left の4つをまとめて0にする書き方です。ボタンは「上下左右の端まで広がっていい」と言われますが、幅と高さが56pxと決まっています。そこで margin: auto にすると、余った分が上下左右に均等に分けられ、真ん中に止まります。この決まりはCSSの仕様（W3C）に書かれています。

昔の書き方との違い

flex と grid が使えるようになる前は、目的ごとに別の書き方をしていました。今もよく見かけるので、何をしているのかだけ知っておくと、古いサイトを直すときに困りません。

text-align: center は文字の行を横にそろえるだけ、margin: 0 auto は幅のある箱を横に置くだけで、どちらも縦には効きません。右の top: 50% と transform の組み合わせは縦横とも真ん中になりますが、中身を箱の流れから外すので、中身が長くなっても箱は大きくなりません。新しく作るなら、1〜3で書きます。

3の align-content は新しい書き方

align-content は、もとは flex や grid のための指定でした。MDNの対応表によると、ふつうの箱（ブロック）でも効くようになったのは、Chrome・Edge 123、Firefox 125、Safari 17.4 からです。対応していないブラウザでは、中身が上に寄るだけで、読めなくなることはありません。

数値を変えるとどうなるか：高さの決め方

1の flex の中央寄せで、箱の高さの決め方だけを変えました。中身は5行の文です。

min-height は「これより小さくはしない」という指定です。中身が多いときは箱がのびます。height で高さを固定すると、中身が箱からはみ出します。真ん中に置いた中身は上下の両方にはみ出すので、上の1行目が箱の外に出て、前の要素と重なることがあります。

真ん中に置いた文字が箱からはみ出すのを防ぐ一番の方法は、高さを固定しないことです。

スマホと、見る人への配慮

スマホでは文字が増えたのと同じになる

スマホでは箱の幅が狭くなるので、同じ文でも行の数が増えます。パソコンで1行だった見出しが、スマホでは3行になることもあります。高さを min-height にしておけば、行が増えても箱がのびるので崩れません。

長い文章は真ん中にそろえない

中央寄せにした文章は、1行ごとに始まる位置が変わります。2〜3行なら問題ありませんが、それ以上になると、次の行の頭を探すのに目が迷います。見出しや短い告知は真ん中、本文は左そろえ、と分けます。

見た目の位置と、読む順番は別

flex や grid には、order などで見た目の順番を入れかえる指定もあります。真ん中に置くだけなら使う必要はありません。見た目と読み上げの順番がずれるので、中央寄せのついでに順番まで入れかえないようにします。

ボタンは名前を付けておく

4の再生ボタンのように、アイコンだけのボタンは、読み上げソフトでは何のボタンか分かりません。aria-label="動画を再生" のように名前を付けておきます。

やりすぎ注意

ページの中のすべての箱を中央寄せにすると、どこから読めばいいのかが分かりにくくなります。真ん中に置くのは、見出し・ボタン・告知など「ここを見てほしい」ものに絞ります。

AIに頼むなら

Claudeなどの生成AIに頼むときは、何をどこに置くか、高さをどう決めるかまで伝えると、手直しが減ります。

このHTML（貼る）の告知の枠の中で、見出しと日付を縦も横も真ん中に置いて。
display: grid と place-items: center で書いて。箱の高さは height ではなく min-height: 160px にして。
position: absolute と transform での中央寄せは使わないで。

AIが出したコードは、そのまま使う前に、次の3つを確かめます。

  • height で高さを固定していないか。スマホ幅にして、文字が箱からはみ出していないかを見ます
  • top: 50% と transform の昔の書き方が混ざっていないか。古い書き方の例をもとにしたコードが出てくることがあります。動いていても、中身が長くなったときに崩れやすくなります
  • 長い文章まで真ん中にそろえていないか。「全部中央に」と頼むと、本文の段落まで中央寄せになることがあります

KAKERUならこう使う／使わない

最後に、作り手としての判断です。

使う場面

  • ボタンの中のアイコンと文字。flex で縦の高さをそろえます。アイコンと文字の高さがずれていると、それだけで雑な印象になります
  • 告知の枠・トップの大きな画像の上の見出し。grid の place-items: center で、まとまりごと置きます。高さは min-height にします
  • 動画のサムネイルの再生ボタン。position で重ねて、三角は少しだけ右にずらします。三角は形の重心が左にあるので、計算上の真ん中に置くと左に寄って見えるためです

使わない場面

  • 3行を超える文章の中央寄せ。本文は左そろえにします
  • 高さを固定した箱での中央寄せ。パソコンでは良くても、スマホで文字があふれます
  • 新しく作るときの top: 50% ＋ transform。古いサイトを直すときに見かけたら、そのまま動いていれば無理に直しませんが、手を入れるついでに flex か grid に置きかえます
トミー

迷ったら、横に並べたいなら flex、まとまりで置きたいなら grid。KAKERUではこの2つでほぼ足りています。
大事なのは書き方より、「真ん中に置くもの」を絞ることだと考えています。

まとめ

  • 横に並べて真ん中なら display: flex＋justify-content＋align-items
  • まとまりごと真ん中なら display: grid＋place-items: center
  • ふつうの箱のまま縦だけなら align-content: center（2024年から主なブラウザで対応）
  • 画像の上に重ねるなら position: absolute＋inset: 0＋margin: auto
  • 箱の高さは min-height にして、長い文章は真ん中にそろえない

まずは、サイトのボタンの中のアイコンと文字に、1のコードを当ててみてください。高さがそろうだけで、ボタンの印象が変わります。

参考にした資料

いずれも2026年11月12日に確認しました。内容は変わることがあります。最新の情報は各ページでご確認ください。

ふだんの制作の話や、作ったものの裏側は Instagram と X でも出しています。

関連記事

カードを並べるCSS。グリッドで自動で折り返す、auto-fillとauto-fitの違いと使う・使わないの判断
関連記事カードを並べるCSS｜グリッドで自動で折り返す、auto-fillとauto-fitの違いとコピペで使える4種類
画像の上の文字を読みやすくするCSSの重ね方 コピペで使える5種類と、写真が替わっても読める濃さ
関連記事画像の上の文字を読みやすくするCSS｜コピペで使える5種類と、写真が替わっても読める濃さ
マウスを乗せると動くボタンをCSSだけで コピペで使える5種類と、スマホ・キーボードへの配慮
関連記事マウスを乗せると動くボタンをCSSだけで｜コピペで使える5種類と、スマホ・キーボードへの配慮
dialog要素で作るモーダルウィンドウの見本とコード
関連記事モーダルウィンドウはdialog要素で作る｜Escで閉じる・外側で閉じるコピペ4種類

次に読む

無料の道具（登録なし）KAKERU TOOLS｜仕事の「ちょっと面倒」を、道具で減らす。WEB技術・次の回キーボード操作の枠をCSSで整える｜:focus-visibleでクリックでは出さずTabでは出すWEB技術・前の回スクロールバーの見た目を整えるCSS｜scrollbar-colorで色、thinで細く、gutterでずれ防止
display: grid と place-items: center で見出しを箱の真ん中に置いた見本とコード

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA


ABOUTこの記事をかいた人

25歳からWEBの世界に携わり、WEBデザインから始めて、今はWEBシステムまで一貫して制作しています。問題点を洗い出し、改善を提案する中で、WEB・グラフィック・動画・システムを縦断して提案するのが得意です。

NEW POSTこのライターの最新記事