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}); 

편집

체크 아웃 나의 새로운 예를 http://jsfiddle.net/z8gph/1/

당신이 그것을 가로 여기에서 보는 센터 도움 margin: 0 auto;을 설정하지 않고 작업 할 경우 http://jsfiddle.net/z8gph/2/