ブラウザのサイズを変更した後でも、モーダルの中心を水平に配置する方法は？

Question

jqueryを使用してDOMにアイテムを追加しようとしています。他のすべてのコンテンツ（すでに設定されている何百ものZ-インデックスがある）の上（z-インデックス）にオーバーレイして、常に中央に配置する必要があります。

このdivをDOMに追加しているとき、 'left'プロパティを$（window）.width（）/ 2-971/2に設定します。 971は、追加しようとしているdivの幅です。これは、ブラウザのサイズが変更された後、それ

width: 971px; 
height: 669px; 
background-image: url(/path/to/image/); 
position: absolute; 
margin: 0px auto; 
z-index: 2500; 

問題があるが、div要素が中心にとどまらないためのCSSです。私は左に試してみました：50％といくつかのマイナスの左余白ピクセルインチ'left'プロパティを 'screen'との関連で設定すると、ブラウザウィンドウがユーザーによって最大化された場合にのみ中央に配置されます。

この絶対配置されたdivを高いz-インデックスで配置すると、常にその中央に配置されるようになります。

Answer 1

#someId{ 
    width: 971px; 
    height: 669px; 
    padding: 0; 
    border: 0; 

    margin-left:-486px; /* 971/2 */ 
    margin-top:-335px; /* 669/2 */ 

    position: fixed; 
    left: 50%; 
    top: 50%; 

    background-image: url(/path/to/image/); 
    z-index: 2500; 
} 

例えば

私はあなたがこれを試し言った知っている - しかし、これは常に標準準拠モードで実行されている任意のブラウザで私のために働いています（でも、すなわち）それがスローされている場合がありますボーダーやパディングを考慮しないことでオフにします。実際の例を次に示します：http://jsfiddle.net/U3RrT/

これは、異なるpositionプロパティを使用してその上に要素を設定したことが原因である可能性があります。試してくださいposition:fixed;。

Answer 2

まず、margin: 0px auto;は、divを水平方向に中央に配置するのに十分です。したがって、leftプロパティを削除するだけで問題を解決できる場合があります。

---

IFないあなたはjQueryのを使用しているので、あなたは再び外観を修正するために制御することができwindowの.resize()イベントがあります。

function resizeMyBox() { 
    //code to resize 
}  
$(function() { 
    resizeMyBox(); // Resize on DOM ready 
}); 
$(window).resize(function() { 
    resizeMyBox(); //Resize again on every resize 
});