やりたいこと
HTMLでよく使って簡単そうなのに何気に難しい中央ぞろえの方法をまとめます。
前準備
まずは中央ぞろえしたいタグが何者かを確認します。
だいたい以下の２個のうちどちらかだと思います・
どちらかのタグを中央ぞろえするかにより実装方法が異なります。
コンテンツ
テキストや画像など
ブロック
複数のコンテンツを含む領域
例：divなどで宣言される
例にタグを挙げていますが、displayスタイルで変更が可能です。
そのためdivだったら必ずblockというわけではありません。
実装
コンテンツ
横方向
親のタグにtext-align:centerのスタイルを指定します。
下の例のようにspanやimgに設定するのではないので注意してください。
またこのスタイルは親ブロックの中央に表示するスタイルなので親のブロック（下の例ではdiv）を画面中央に表示するか100％の幅で表示する必要があります。
<div style ="text-align:center;width:100%">
<span>aaaaa</span>
<img src="img.jpg">
</div>実行例：imgは消してます
縦方向
親のタグにalign-content: centerのスタイルを指定します。
下の例のようにspanやimgに設定するのではないので注意してください。
またこのスタイルは親ブロックの中央に表示するスタイルなので親のブロック（下の例ではdiv）を高さを指定する必要があります。
<div style ="align-content:center;height:500px">
<span>aaaaa</span>
</div>実行例：imgは消してます
ブロック
横方向
中央ぞろえするタグにmargin: 0 autoのスタイルを指定します。
（わかりやすいようにdivの背景を黄色にしています。）
<div style ="margin: 0 auto; width:100px; background-color:yellow">
<span>aaaaa</span>
<img src="img.jpg">
</div>実行例：imgは消してます。
縦方向
ちょっとめんどくさいですが以下のようにしました。
（わかりやすいようにdivの背景を黄色、親のdivの背景を赤にしています。）
<div style="height:300px;background-color:red;position: relative;">
<div style="background-color:yellow;position: absolute;height:50%;top: 0;bottom: 0;margin: auto;">
<span>aaaaa</span>
</div>
</div>実行例：imgは消してます
結果
HTMLで中央ぞろえをすることができました。
おまけ
ドキュメントのヘッダ用ように 左詰め 中央ぞろえ 右詰め となるコードを紹介します。
<div style="display:inline-block; width:30%;text-align:left">left</div><div style="display:inline-block; width:40%;text-align:center">center</div>
<div style="display:inline-block; width:30%;text-align:right">right</div>実行例：(leftとrightの背景色を変えています。)
コメント