0

ここにいる人は、ユーザーの画面解像度やウィンドウサイズに関係なく、divをページの中央に（垂直に）移動させる方法を知っていますか？例として、Instagramのログインページ。ウィンドウを小さくすると、divは上部に到達するまで中央に浮き続けます。私はそれを作りましたが、問題は、ユーザーがウィンドウを小さくし続けると、divが実際にユーザーウィンドウの外（上）に出てしまうことでした。

例のInstagramログインページは次のとおりです： https ：//instagram.com/accounts/login/

そして、これが他の例の私のページです：http: //www.farespr.com

答えをいただければ幸いです=）

編集：これは私のメインのdivコードです：

#wrapper2{
    width: 960px;
    height: 530px;
    top: 50%;
    margin-top: -280px;
    margin-right: auto;
    margin-left: auto;
    position: fixed;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #dcdcdc;
    box-shadow: 0px 0px 5px 3px #f0f0f0;
    background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#efefef));
    background: -moz-linear-gradient(top,  #fafafa,  #efefef);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#efefef');
}
4

1 に答える 1

6

これは、任意のサイズのdivで機能します。

デモ： http： //jsfiddle.net/BxLhz/

HTML：

<div></div>

CSS：

div {
    width: 100px;
    height: 100px;
    background-color: #cc333;

    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
}

アップデート：

デモ： http： //jsfiddle.net/Ha4PU/

CSS：

#wrapper {
    width: 200px;
    height: 200px;
    background-color: #ccc333;

    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
}

@media only screen and (max-height : 200px) {
    #wrapper {
        position: relative;
    }
}

ここでmax-height=の高さ.wrapper

于 2013-02-14T16:52:51.177 に答える