알 수없는 너비의 HTML 요소를 화면 중간에 가운데에 배치하십시오.

Question

알 수없는 너비와 높이의 HTML 요소가있는 경우 어떻게하면 화면 중앙에 정확히 놓을 수 있습니까?

순수 CSS로 수행 할 수없는 경우 javascript는 정상입니다.

Answer 1

이 나 방법 알 수없는 너비/높이에 따라, 상황에 적합하지 않을 수있다이 답변이 결정되고있다 .. JQuery와 통해 그것을 할 수 있습니다.

#content { 
    background-color: khaki; /* demo purposes */ 
    position: absolute; 
    height: 20%; 
    top: 50%; 
    margin-top: -10%; /* half the height */ 
    width: 30%; 
    left: 50%; 
    margin-left: -15%; /* half the width */ 
} 

는 예를 들어 this fiddle 항목 : 정확한 크기는 알 수없는,하지만 그들은이 비율로 설정되어있는 경우, 당신은이 기술을 사용할 수 있습니다. 요약하면 :

• 콘 : 그들은 %에 지정되어 있기 때문에 정확한 크기는 알 수없는 경우에만 적용 할 수 있습니다.
• pro : 순수 CSS 솔루션.

Answer 2

당신은

$(function() { 
    var element=$("#elementid") 
    element.css("position","absolute"); 
    element.css("top", Math.max(0, (($(window).height() - this.outerHeight())/2) + 
               $(window).scrollTop()) + "px"); 
    element.css("left", Math.max(0, (($(window).width() - this.outerWidth())/2) + 

});