Div水平中央と垂直中央

divをページのbodyの水平中央と垂直中央に揃えたいとします。Div水平中央と垂直中央

CSS：

.loginBody { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    background: #999; /* for non-css3 browsers */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */ 
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */ 
    background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */ 
} 
.loginDiv { 
    position: absolute; 
    left: 35%; 
    top: 35%; 
    text-align: center;   
    background-image: url('Images/loginBox.png'); 
    width:546px; 
    height:265px; 
}

そして、私はこのHTML持っている：

<body class="loginBody"> 
    <form id="form1"> 
    <div class="loginDiv"> 

    </div> 
    </form> 
</body>

私はそれがしたいと今では動作しているが、私は、ブラウザのサイズを変更する場合、それはおそらく、完全に歪んだなりましたがこれは絶対配置のためです。リサイズFirefoxで：私はスクリーンショットの一部を示すのですリサイズIEで enter image description here

は：最大化されたウィンドウにそれがある enter image description here

： enter image description here

リサイズしたクロムに

この問題を解決し、相対位置決めを使用してこの中心合わせを行う方法はありますか？

ありがとうございました。

編集：リサイズしながら、Firefoxで

何のスクロールバーは表示されませんが、それは他のブラウザに表示されます。 enter image description here

出典

2012-03-11 Tapas Bose

これを試してみてください：

.loginDiv { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    text-align: center;   
    background-image: url('Images/loginBox.png'); 
    width:546px; 
    height:265px; 
    margin-left: -273px; /*half width*/ 
    margin-top: -132px; /*half height*/ 
}

あなたが中央に移動し、バックよりも半分までの寸法によって、左と - これは

出典

2012-03-11 15:47:22 StilgarBF

おかげで働いたことが今取り組んでいるが、Firefoxで一つの問題thサイズ変更中はスクロールバーは表示されませんが、他のブラウザには表示されます。私は私の質問を更新しました。それを見てください。 –

あなたがスクロールバーを必要としない場合は、本体に 'overflow：hidden'を追加してください。 – StilgarBF

いいえ、私はスクロールバーが必要なので、本体に' overflow：auto'を設定します。 –

#div { 
    height: 200px; 
    width: 100px; 
    position:absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -100px; 
    margin-left: -50px; 
}

のサイズを変更しても上のそれを中心に説明することdivを中心に置く一般的な方法。あなたはそれを絶対的に配置し、次にそれを半分の方向に移動します。次に、配置しているdivの寸法の半分だけ余白を付けて位置を調整します。参考のため

（モーダルポップアップを行う際に役立つ、スクロールしても所定の位置にdiv要素を維持するものの、これは固定された位置を使用しています。.. http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

出典

2012-03-11 15:47:29 Greg

助けてくれてありがとう。現在は機能していますが、Firefoxではサイズ変更中にスクロールバーがありませんが、他のブラウザには存在します。私は私の質問を更新しました。それを見てください。 –

http://jsfiddle.net/mAVd6/2/これは基本的にページの作り方を反映していますか？ Firefoxでスクロールバーを生成しますか？他のブラウザ？ - スクロールバーに何が起こるのかを固定して絶対スワップしたら？ – Greg

位置を絶対値から固定値に変更した場合、どのブラウザにもスクロールバーが表示されません。 –

ページの内容のためであるdiv要素を作成し、 "作ります以下のCSSを使用したコンテンツ」クラスが。これは。助けのために。それは誰かに役立ちます願っています。AndroidデバイスのためのPhoneGapとjQueryのモバイル上で私のため

CSS

.content { 

     width: 100%; 
     height: 100%; 
     top: 25%; 
     left: 25% 
     right: 25%; 
     text-align: center; 
     position: fixed; 
}

出典

2012-08-07 17:49:06

答えて

関連する問題