十字架ラビアンローズ

縦横幅を固定しないブロック要素を、ページ全体や他要素全体に対して、簡単に上下左右にセンタリングする方法を解説します。

  1. トップページ
  2. Webサイト構築
  3. CSS
  4. 縦横幅可変のブロック要素を、ページ全体に対し上下左右にセンタリングする方法

縦横幅可変のブロック要素を、ページ全体に対し上下左右にセンタリングする方法

2014.4.26.Sat. 12:41

ブロック要素を<body>に対して上下左右にセンタリングする方法として、しばしば以下のようなCSSの指定が用いられます。


body
{
position:relative;
}

body > div
{
position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -200px;
width:400px;
height:300px;
}

この方法の場合、まず400×300pxの領域を持つ<div>の左上の角が、<body>のちょうど中央の位置に来るように絶対配置されます。
そしてそれを、縦横それぞれの幅の半分の数値の分だけマイナスのマージンを適用させる事で、<div>の中心点が<body>の中心点と一致し、結果として<body>に対して<div>が上下左右にセンタリングされるようになります。
しかしこの方法の場合、<div>の縦幅・横幅の数値が固定となってしまいます。

しかし次に紹介する方法ですと、縦幅・横幅の数値を固定する必要がなく、コンテンツ量に応じて大きさが可変するブロック要素を、<body>に対して上下左右にセンタリングさせる事が出来るようになります。


<body>
<div>サンプルサンプル</div>
</body>

HTMLの方での指定はたったこれだけです。


html
{
display:table;
width:100%;
height:100%;
}

body
{
display:table-cell;
vertical-align:middle;
}

body > div
{
display:table;
margin:0 auto;
}

そしてこちらがCSSの内容です。
ポイントは、<html><body><div>をそれぞれテーブル及びテーブルのセルのように見立てる事にあります。
<table>は横幅を固定していなくとも<table>自体を横方向にセンタリングさせる事が出来、<td>はその内容を<td>に対して縦方向にセンタリングさせる事が出来ますが、そのような挙動を<body><div>でやってしまおうというものです。

まず<html>についてですが、一見必要なさそうな指定のように見えて、実は必要な指定です。
<body>は通常、width:100%;と言われるとブラウザの横幅いっぱいという意味に解釈されますが、縦幅はコンテンツ量に応じてほぼ無限に伸びていく為、height:100%;と言われてもそれがどれくらいの高さの事を指しているのかを解釈出来ないのです。
ですがここで、<html>の方にて上述のような指定をしてあげると<html>はそれを解釈し、<html>の子要素である<body>もそれに従い、height:100%;をブラウザの縦幅いっぱいという意味として解釈するようになります。
(しかし<html>は本来CSSを適用させるようなコンテンツ要素ではない為、何故そのように解釈される事になるのかについては不明・微妙なのですが…)

<html><body>は、さながら<table><td>のような親子関係となります。
また、<html>というテーブルが抱えているセルの数は、<body>という1つのみであると考える事が出来ます。
そして、親である<html>の縦横幅をそれぞれ100%と指定している為、子である<body>の縦横幅も同様に100%になります。
その為、<body>の中のコンテンツ内容を、<body>に対して縦方向にセンタリングさせる事が出来るようになるのです。

そして、<body>の直下の<div>をテーブルとして振舞わせる事で、<div>を「横幅を固定せずとも横方向にセンタリングさせる事の出来る要素」に仕立てあげる事が出来るのです。

以上が仕組みの理由と解説になります。
記述を改変する事で、<body>に限らず、ページ内のある特定の要素の中で子要素を上下左右にセンタリングさせるという事も出来るようになります。
サンプルページを用意していますので、色々とブラウザの大きさを変更して表示を確認してみて下さい。

Twitter

アーカイブ

全記事アーカイブ