ブロック要素を画面中央に表示させる方法

　<TABLE> タグを利用して頁のレイアウトを決める場合は、align="center" という属性で左右方向のセンタリングが可能でした。 しかし、本来は <TABLE> タグでレイアウトを作るのは反則的な方法なので、現在ではスタイルシートを用いてレイアウトを決めることが一般的です。

　ところが、スタイルシートでは位置を決める変数が基本的に px などの具体的な数値なので、ブロック要素を配置したい領域の大きさが予め決まっている場合は細かい指定ができていいのですが、 例えば、環境によって大きさが変わる「画面」の中央に配置したい場合は困ります。

　これを解決するためには、以下の二つの方法が考えれます。ただし、どちらの場合も中央に表示させたいブロック要素の大きさは % ではなくて px などの具体的な数値で決めておかないと表示が崩れるようです。

　まず、例 1.1 のように position:absolute; left:50%; で中央に要素の左端を合わせ、次に、要素の幅の半分だけ左にずらすという方法です。こうすると、要素の中央が画面の中央に来るため、画面の大きさが変わっても要素は常に中央に表示されます。 同様のことを縦方向に使えば、縦横両方の方向で画面の中央に置くことができます。つまり例 1.2 のようです。

　次に、例 2.1 のように margin:auto を使う方法が考えられます。この場合、予め中央寄せにしたいブロック要素の親要素（例えば div あるいは body）に text-align:center を入れておく必要があります。 同様にして、縦方向も vertical-align:middle を指定することで画面の中央に置くことが可能のようです（例 2.2）。しかし、これらの方法は親要素の align や vertical-align に依存しなければならないため、 例 1.1 や 1.2 に較べると応用性が低いかも知れません。

Fidelio  >  もくじ  >  PC と Internet  >  HTML Memorandums  >  ブロック要素を画面中央に表示させる方法