div (중심)에 div를 배치하는 JavaScript 수학

Question

특정 높이와 특정 너비가있는 화면 가운데에 특정 높이와 특정 너비가있는 div 상자를 배치하려고합니다.

JavaScript가 감지되었습니다. 나는 항상 더 나은 프로그래머와 수학 및 프로그래밍이되기 위해 노력하고 있습니다. 나는 약간의 분열과 퍼센트 수정을 할 필요가 있지만 포인터를 필요로 실현하십시오 img_w 및 img_h은 어떤 그래서 기본적으로

<script type="text/javascript"> 

var w=document.width; 
var h=document.height; 

var img_w=200; 
var img_h=300; 

var css=; 

/* 

Example 

w=600; 
h=400; 

img_w=200; 
img h=300; 


therefore css will be 

position:absolute; 
top:150px; 
left:100px; 
right:100px; 
bottom:100px; 

see my image. 

*/ 

document.writeln(css); 
</script> 

는, 상자가 중앙에 여백이 위치한다.

left = (width - img_width)/2 
top = (height - img_height)/2 

PS :

Answer 1

대체 방법을 제안 해주세요.

CSS는 절차 적이지만 선언적 언어가 아닙니다. 브라우저가 당신을 위해 수학을하고 margin: auto을 사용하십시오. 나는 이것이 당신이 찾고있는 것이 아니라는 것을 이해하지만, CSS는 그것에 관한 것입니다.

예를 들어 http://jsfiddle.net/th43T/을 참조하십시오.

Answer 2

당신이 찾고있는 공식은 다음과 당신의 예에서는 h 및 w 반전. (- 이미지 너비 전체 폭)/동일 2. 높이

간다하지만, 왜 150 픽셀과 하단 최고입니다 :

을 (다른 사람이 지적했듯이)

Answer 3

은 내가 먼저 수학은 수학이 생각 당신의 예제에서 100px?

Answer 4

Block css:{ 
    left: 50%; 
    top: 50%; 
} 

JS (useing jQuery): { 
    block.css({ 
     'margin-left': '-' + (block.outerWidth()/2), // margin-left: -1/2 of block width 
     'margin-top': '-' + (block.outerHeight()/2), // margin-top: -1/2 of block height 
    }) 
} 

Answer 5

창 크기를 조정할 때 가운데로 유지해야하는 경우 창 크기 조정 이벤트도 확인해야합니다. http://jsfiddle.net/ekRff/1/

스크립트 :

function updateBoxPosition($box) { 
    var window_width = $(window).width(); 
    var window_height = $(window).height(); 
    var left_pos = (window_width - $box.width())/2; 
    var top_pos = (window_height - $box.height())/2; 

    $box.css('left', left_pos); 
    $box.css('top', top_pos); 
} 

$(function() { 
    var $box = $("#box"); 
    var window_width = 0; 
    var window_height = 0; 

    var resizeTimer; 
    $(window).on('resize', function() { 
     clearTimeout(resizeTimer); 
     resizeTimer = setTimeout(function() { 
      updateBoxPosition($box); 
     }, 25); 
    }); 

    updateBoxPosition($box);   
});​ 

상위 함수의 위치를 ​​처리하며, 위치가 바인딩 onload 이벤트 동안 수행

는 I이 jsfiddle을 만들었다. 그것은 jQuery를 필요로하지만 브라우저가 윈도우의 너비를 처리하는 방법에 차이가 있기 때문에이 상황을 위해 권장합니다.

resize 이벤트에 추가되는 타이머는 성능 향상을 위해 resize 이벤트가 크기 조정 중에 다소 자주 발생합니다.