1

この種のことがよく聞かれることは知っていますが、divをページの中央に配置し、幅や高さに関係なく常にページの中央に留まるようにしたいと考えています。

JavaScript を使用して要素の幅を計算し、その半分の量を余白から取り除くのが最善だと思います。

物事を明確にするために、この種のこと：

.myDivHere {
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;        
    width: 20%;
    height: 20%;
    margin-left: -273px; /*half width set by js script*/
    margin-top: -132px; /*half height set by js script*/
}

幅と高さを 20% に設定しました。これは、この div がブラウザー ウィンドウに対して相対的なサイズを保持できるようにするためです (モバイル サポートなどのため)。何か案は？

4

4 に答える 4

4

何か不足していない限り、JavaScript を忘れてプレーンな CSS を使用できます。

div {
    position:absolute;
    background:red;
    width:20%;
    height:20%;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}

jsFiddle の例

于 2013-10-30T19:17:07.207 に答える
0

パーセンテージではなくピクセル単位で計算された幅を返すため、およびメソッドをjQuery使用できます+ウィンドウイベントをリッスンする必要があります。たとえば、次のようにします。.width().height()resize

$(function() {
    function updateDivPosition() {
        var myWidth = $( '.myDivHere' ).width()
          , myHeight = $( '.myDivHere' ).height();
        $( '.myDivHere' ).css( { 
            marginLeft: -( parseInt( myWidth, 10 ) / 2 ) + 'px',
            marginTop: -( parseInt( myHeight, 10 ) / 2 ) + 'px'
        });
    }
    updateDivPosition(); // first time set correct position on onload
    $( window ).resize( updateDivPosition ); // update on window resize
});

jsFiddle デモ

于 2013-10-30T19:14:16.890 に答える
0

コードペンは次のとおりです。

見てみな。

スタイルのほとんどは必要ありません。javascript は絶対に必要ありません。垂直方向のセンタリングの鍵はdisplay: table. ネストが必要なので、構造も変更しました。

于 2013-10-30T19:20:20.677 に答える
0

どうぞ。

この回答は、完全に回答を提供するというよりも概念に関するものであることに注意してください。

CSS の 'div#b' セクションが見えますか? すべてを中央に保つには、margin-top の値を高さの -50% に保つスクリプトを書くだけです。以上です！

例: (現在) height = 60, margin-top = -30px (height = 100 に変更) height = 100, margin-top = -50px

div#a
{
    width: 300px;
    height: 300px;
    border-width:1px;
    border-style: solid;

    /* important stuff below */
    display: inline-block; 
}

div#b
{
    width: 60px;
    height: 60px;
    background-color: red;

    /* important stuff below */
    position: relative;
    margin: -30px auto 0 auto;
    top: 50%;    
}
于 2013-10-30T19:19:47.963 に答える