2025年最新CSS！いまだに50%で中央寄せしてるの？モダンな中央寄せCSS4選
はじめに
昔は position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) で中央寄せするのが定番でした。
しかし、このやり方は 冗長で副作用も多く、拡張性が低い という欠点があります。
CSSが進化した今、もっとシンプルで柔軟な中央寄せ方法が存在します。
今回は初心者から上級者まで使える モダンな中央寄せCSS 4選 を比較します。
なぜ50%＋transformを卒業すべきか？
-
記述が長い：
top/left/transformの3か所を組み合わせる必要 -
副作用：
transformは新たなスタッキングコンテキストを作り、意図しない影響が出ることがある - 拡張性が低い：複数要素やサイズ可変レイアウトへの適用が面倒
モダンな中央寄せ4選
基本構造
<div class="parent">
<div class="child">Center me</div>
</div>
① Flexboxで中央寄せ
親要素に display: flex を指定し、justify-content と align-items を両方 center に。
子要素のサイズや中身が変わっても安定して中央寄せできます。
.parent {
display: flex;
justify-content: center;
align-items: center;
}
② Gridで中央寄せ
display: grid; place-items: center; と1行で縦横中央寄せが可能。
単一要素なら最短記法、複数要素のグループ中央寄せは place-content: center が便利です。
単一要素
.parent {
display: grid;
place-items: center;
}
要素グループ
.parent {
display: grid;
place-content: center;
gap: 1rem;
}
③ 絶対配置＋inset＋margin: auto
親要素を position: relative; にし、子要素を position: absolute; inset: 0; margin: auto; に。
固定サイズの要素をtransformなしで安全に中央寄せできます。
.parent { position: relative; }
.child {
position: absolute;
inset: 0;
margin: auto;
width: 300px;
height: 200px;
}
④ 子要素の margin: auto 活用
親がFlexまたはGridであれば、子要素に margin: auto; を指定するだけで縦横中央寄せ可能。
justify-content / align-items を書く必要がなく、コード量をさらに減らせます。
Flex＋子にmargin:auto
.parent {
display: flex;
min-height: 60svh;
}
.child {
margin: auto;
}
Grid＋子にmargin:auto
.parent {
display: grid;
min-height: 60svh;
}
.child {
margin: auto;
}
比較表
| 手法 | コードの短さ | 対応ブラウザ | 複数要素対応 | 高さ不定対応 |
|---|---|---|---|---|
| Flexbox | △ | ◎ | ◎ | ◎ |
| Grid | ◎ | △ | ◎ | ◎ |
| inset＋margin | ○ | ◎ | △ | △ |
| 子にmargin:auto | ◎ | ◎ | ◎ | ◎ |
卒業したいアンチパターン
.child {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
}
冗長、可読性が低い
transformによる副作用あり
新規コードでは避けたい
まとめ
レイアウト全体や柔軟性重視 → Flexbox
1行で書きたい＆IE不要 → Grid
固定サイズポップアップなど → inset＋margin
最短コード狙い → 子にmargin:auto
Discussion