HTML | 非推奨、廃止予定となっているcenterタグの代替案

2023-10-05HTML 廃止・非推奨,HTML

HTML5より非推奨、廃止予定となっている<center>タグの代替案とサンプルコードを紹介しています。

centerタグについて

<center>タグはHTML5から既に非推奨、廃止予定となっています。
2023年現在は、Chrome系ブラウザをはじめ多くのブラウザで<center>タグは機能しています。

<center>テキストの中央寄せ</center>

以下は、上記の非推奨となっている<center>タグを使った動作サンプルです。

centerタグの代替案

<center>タグの代替案について、対象がテキストであれば中央寄せしたい要素に対して「style」属性に「text-align:center」を指定する方法が最も簡単な指定方法です。

<div style="text-align:center;">
	<p>中央寄せ</p>
</div>

以下は、「text-align:center」を使った動作サンプルです。

対象がテキストではなく要素そのものに対してであれば、他にも多くの指定方法があります。
オススメは「display:flex」と「justify-content:center」ですが、状況に応じて使い分けます。

<!-- display:flex で中央寄せ -->
<div style="display:flex;justify-content:center;">
	<div style="background:#FFF000;width:100px;height:100px;"></div>
</div>

<!-- position: relative で中央寄せ -->
<div style="position: relative; left: 50%; transform: translateX(-50%);">
	<div style="background:#FFF000;width:100px;height:100px;"></div>
</div>

<!-- margin: auto で中央寄せ -->
<div>
	<div style="margin: auto;background:#FFF000;width:100px;height:100px;"></div>
</div>

以下は、上記3タイプの中央寄せのコードを実行した動作サンプルです。