jQueryとCSSマージンを使用して自動中心垂直/水平マージンを調整する方法

Question

ブロック要素（imgまたはdiv）を幅と高さが％のコンテナに合わせようとしています。

ここに私がしたことがあります。 http://jsbin.com/ibakuw

$('#container img') 
    .css({ 
     'margin': ($('#container').height() - $('#container img').height())/2 + 'auto', 
     'background':'red'}); 

私は、要素が私のブラウザまたはコンテナをオーバーフローしているため、垂直中心にこの{position:absolute; top:50%; height:240px; margin-top:-120px; } アプローチを使用する必要はありません。ブラウザ内で拘束されているだけです。

助けてください。ありがとうございました！編集した

：

は、私がここにhttp://jsbin.com/ibakuw/5

var contHeight = $('body').height(), 
    paddVertical = ($('#container').height() - $('#container img').height())/2, 
    paddHorizon = ($('#container').width() - $('#container img').width())/2; 

$(function() { 

    $('#container img') 
    .css({ 
     'marginLeft' : paddHorizon +'px', 
     'marginTop' : paddVertical +'px' 
    }); 


    $(window).resize(function() { 
    $('#container img') 
     .css({ 
     'marginLeft' : paddHorizon +'px', 
     'marginTop' : paddVertical +'px' 
     }); 
    }); 

}); 

Answer 1

を$(window).resize(function() {を追加しました私はあなたの正確なセットアップを持っていない限り、これは私はあなたに答えるに得ることができる最も近いここに私の例http://jsfiddle.net/z8gph/

をチェック質問。

まず、外側および内側の容器を相対的に配置します。

jqueryを使用して垂直方向にセンタリングすると、外側コンテナから内側コンテナを差し引いた高さが2で割られます。次に、内側コンテナの上部に.cssを設定します。

var center = ($("#outer").height()-$("#inner").height())/2; 
$("#inner").css({"top":center}); 

EDIT

私の新しい一例をチェックアウトhttp://jsfiddle.net/z8gph/1/

あなたはそれがセンターを支援するmargin: 0 auto;を設定せずに仕事をしたい場合は水平にここhttp://jsfiddle.net/z8gph/2/