CSSによる絶対中央寄せ
HTML の <body>X Media</body> のみを使用し、ソースコードを一切変更せずに、テキストを画面中央（水平・垂直）に表示させる7つのCSS/JS方法を紹介。Flexbox や Grid などのモダン技術から、古いブラウザ向けの手法までを網羅。
目次
方法①：Flexbox を使用（最も実用的）
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}解説：Flexbox は現代的で対応ブラウザも広く、最も簡単かつ確実な中央揃え方法です。
方法②：Grid を使用
body {
display: grid;
place-items: center;
height: 100vh;
margin: 0;
}解説：CSS Grid を使うと、1行で中央揃えが可能。Flexbox と同様にモダンで便利。
方法③：絶対配置と transform を併用
body {
margin: 0;
height: 100vh;
position: relative;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}解説：transform を使えば、どんな要素でも正確に中央に配置できます。
方法④：table-cell と vertical-align を使用
body {
display: table;
width: 100vw;
height: 100vh;
margin: 0;
text-align: center;
}
.centered-wrapper {
display: table-cell;
vertical-align: middle;
}
.centered-content {
display: inline-block;
}解説：古い方法ですが、旧ブラウザとの互換性が高いです。
方法⑤：line-height を使った方法（1行テキスト専用）
body {
height: 100vh;
margin: 0;
line-height: 100vh;
text-align: center;
}解説：1行のテキストのみなら、シンプルで CSS も軽量。
方法⑥：position + top/left + transform（直接 body に適用）
body {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}解説：transform を使えば、レスポンシブな中央揃えが可能。
方法⑦：JavaScript を使って位置を調整
<style>
body {
position: absolute;
margin: 0;
}
</style>
<script>
window.onload = function() {
document.body.style.top = '50%';
document.body.style.left = '50%';
document.body.style.transform = 'translate(-50%, -50%)';
};
</script>解説：CSS だけでは制御が難しい場合、JS を使って実行時に中央揃えを実現。
注意点・補足
- body タグに直接 CSS を適用する 必要がある。
- HTML を変更できない前提なので、擬似要素や JS 以外での要素追加は禁止。
- 1行テキスト限定の方法（line-height）は多行では崩れるので注意。
- transform を使う方法は、translate の基準が中央になる点を理解すること。
- 高さ指定には
100vhを使うことで、画面サイズに応じた調整ができる。
Web制作現場でよくある質問（FAQ）
Q1：HTML を編集して <div> を追加してもいいですか？
A：今回の条件では「HTML ソースを変更できない」ため不可です。
Q2：一番推奨される方法は？
A：display: flex を使う方法が最も簡単で汎用性が高く推奨されます。
Q3：全てのブラウザに対応していますか？
A：Flexbox や Grid はモダンブラウザに対応。古い IE を対象にする場合は table-cell などを検討してください。
まとめ
| 方法 | 技術 | 特徴 | 推奨度 |
|---|---|---|---|
| ① Flexbox | display: flex | 簡単・モダン | ★★★★★ |
| ② Grid | display: grid | コード短く応用広い | ★★★★★ |
| ③ transform + position | 広く使われる古典的手法 | ★★★★☆ | |
| ④ table-cell | 旧ブラウザにも対応 | ★★★☆☆ | |
| ⑤ line-height | 1行限定、軽量 | ★★★☆☆ | |
| ⑥ transform（直接 body に） | 簡潔で効果的 | ★★★★☆ | |
| ⑦ JavaScript | CSS が使えない時 | ★★☆☆☆ |
関連記事
