web-dev-qa-db-ja.com

水平方向中央と垂直方向中央の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で： enter image description here

サイズ変更されたクロム： enter image description here

サイズ変更された、すなわち： enter image description here

最大化されたウィンドウでは： enter image description here

この問題を解決し、相対配置を使用してこの中央揃えを実現する方法はありますか？

ありがとう。

編集：

Firefoxでは、サイズ変更中にスクロールバーは表示されませんが、他のブラウザでは表示されます。 enter image description here

htmlcssvertical-alignmentalignment
17
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*/
}

あなたはそれを中央に移動し、左後ろに半分の寸法だけ上に移動します-それはサイズ変更でもそれを中央に配置します

19
StilgarBF

ページのコンテンツ用のdivを作成し、次のCSSを使用して「コンテンツ」クラスを作成します。これは、Androidデバイス用のPhonegapを使用したJquery Mobileで私にとってうまくいきました。誰かの役に立てば幸いです。

CSS

.content {
    width: 100%;
    height: 100%;
    top: 25%;
    left: 25%;
    right: 25%;
    text-align: center;
    position: fixed;
}
7
Josh Valdivieso
#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 /

3
Greg