<center> x - 中央ぞろえ　（廃止）

■ 概要

項　　目説　　明
記述形式 <center>～</center>
種　　類 ブロック要素 ，インライン要素 （HTML4.01）

■ 解説

<center>～</center> の範囲を中央に配置して表示します。

HTML5 では見栄えに関する要素として廃止されました。　<div>，<p>，<table> などの要素に CSS の text-align，margin-left，margin-right などのプロパティの指定を行うことで代替できます。　（以下の例を参照。）

■ CSSスタイルシートによる代替方法（１）

HTMLソース
HTML
<body> ～ </body>		 
<div style="text-align:center;">
　<span>中央配置されます</span>
</div>
<p style="text-align:center;">他の種類の要素<br>も同様です</p>

ブラウザー 表示例
中央配置されます

他の種類の要素
も同様です



■ CSSスタイルシートによる代替方法（２）

CSS で margin-left，margin-right の２つのプロパティの値をともに "auto" に設定すると，<div> や <table> などのブロック要素を中央配置することができます。

HTMLソース
<style type="text/css">
<!--
  .c {
    text-align: center;
  }
  table.c,
  div.c,
  p.c {
    text-align: center;
    margin: 0px auto;
    background-color: #ffcccc;
  }
-->
</style>
 
<div class="c">中央配置されます</div>
<p class="c">&lt;p&gt;要素も<br>同様です</p>

ブラウザー 表示例
中央配置されます

<p>要素も
同様です


■ 備考

「代替方法（２）」で示した例では，marginプロパティを用いた指定：{margin: 0px auto;} を使用しています。　これと margin-left，margin-right の２つのプロパティの値を用いた指定：{margin-left: auto; margin-right: auto;} では違いはあるのでしょうか？

実は，これはこの指定を行う前の要素の CSS プロパティの値により異なります。　つまり，この両者では，それ以前のこの要素に対する margin-top，margin-bottom の設定がどうなっているかによって異なります。　 margin-top，margin-bottom の値がともに "0px" である場合には，両者に違いはありませんが，それ以外の場合は指定内容が変わってきます。

とくに，要素の上下の余白設定を保持したい場合には，{margin-left: auto; margin-right: auto;} と書く方が，{margin: 上下余白 auto;} などとするより，ミスにつながりにくいので無難です。