上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

以下のようなHTMLで、wrapperを縦横中央、つまり、ブラウザ画面の中央に表示したい、ということがあるかと思います。

【HTML】
<body>
<div id="wrapper">縦横中央配置したい要素</div>
</body>

よく紹介されているものとして、以下のような方法があります。
(1)対象の要素を絶対配置(position:abusolute)
(2)上50%、左50&の位置に配置(top:50%;left:50%)
(3)対象の要素の幅(width)、高さ(height)の半分をネガティブマージンとして設定する

【CSS】
html,body{
width: 100%;
height: 100%;
}
#warpper {
position: absolute; /*上記(1)*/
top: 50%; /*上記(2)*/
left: 50%; /*上記(2)*/
width: 300px;
height: 200px;
margin-left: -150px; /*上記(3)*/
margin-top: -100px; /*上記(3)*/
}

確かに、この方法で画面の中央表示させる、ということは可能です。
ただ、問題も発生します。

その対象の要素の高さがブラウザの表示領域の高さを上回る場合、対象の要素の上側が表示されなくなる点です。
スクロールもできないため、ウェブサイトの観覧者からは全く見えない部分ができてしまいます。

今流行のネットブックで表示する場合を例とします。
ネットブックでは縦の画面解像度が600px程度ですから、ブラウザの表示領域はメニューやらURLが表示されるボックスやタブが表示される部分を除くと、500px程度と想定されます。

中央表示したい要素の高さが600pxの場合、ブラウザの表示領域の高さ500pxを越える100pxのうち、上側50pxが表示されなくなります。
(margin-top:-300px とするため、500px/2-300px=50px)

中央表示をしたときの問題

上側一部が見えなくても特に問題ないのであればこの手法は大変有効ですが、そうでない場合は別の方法を採用する必要があるかと思います。
Related Posts

Thoughts on スポンサーサイトdiv要素などを縦横中央に配置する方法と、問題点

Leave a Reply

* less than 16 characters
* less than 24 characters
* less than 16 characters
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。