div 안에 팝업을 중앙에 배치하는 방법은 무엇입니까?

구멍 분할 화면에서 팝업 div를 가운데에 배치하는 방법에 대한 몇 가지 해결책을 찾았지만 상위 div 안에 세로 및 가로로 가운데에 맞춰야합니다. 팝업 크기는 고정되어 있지 않으며 상위 div의 크기와 관련이 있습니다. 나는 이것에 관해 아무것도 발견하지 못했고 나는 그것을 스스로 할 수 없었다. 아이디어가 있으면 도움주세요. 우리는 문서의 코드를 이해해야합니다 http://jsfiddle.net/crXCz/div 안에 팝업을 중앙에 배치하는 방법은 무엇입니까?

<div id="container" style="width: something; height: something;> some text <br> some text  
<div class="popup"></div> 
</div> 


div.popup { 
    height: 95%; 
    width: 95%; 
    border-color: #d3d7cf; 
    border-width: 2px; 
    border-style: solid; 
    border-radius: 10px; 
    background-color: #f3f3f3; 
    z-index: 1; 
}

출처

2012-12-23 balping

작업 할 코드가 필요합니다. – sachleen

유용한 정보 : http://stackoverflow.com/questions/11332414/simplest-vertical-alignment-we-can-think-of – unclenorton

둘러보기 http://jsfiddle.net/EjV4V/27/ –

여기 내 코드입니다. 하지만 내 이해에 따르면 당신은 div 요소를 중심에두고 싶다. div 요소의 위치를 상대적으로 설정하고 주 컨테이너의 위치를 절대로 설정하고 CSS 코드를 팝업 상자에 추가하십시오.

.popup{ 
position:absolute; 
top:50%; 
height: <your value in percentage>; 
margin-top: (negative value of your height, divided by 2); 
width:<your value in percentage>; 
left:50%; 
margin-left: (negative value of your width, divided by 2); 
}

출처

2012-12-23 18:57:10

이것은 절대 위치를 사용하기 때문에 부모 div가 아닌 화면에서 내 팝업을 가운데에 배치합니다. 그리고 이것은 고정 된 크기로만 작동합니다 – balping

우리가 당신의 상황을 이해할 수 있도록 바이올린을 추가하는 것을 고려하십시오. 그리고 나는 팝업 요소의 위치를 상대적으로 설정하고 주 div의 위치를 절대로 설정하도록했습니다! –

정확하게 이해하면 두 요소의 높이가 모두 동적입니다. 내가 일반적으로하는 일은 약간의 자바 스크립트를 추가하는 것입니다. (jQuery 가정)

function verticalAlign(el) { 
    // Calculate marginTop by taking parents height minus element height 
    // and divide the value by two 
    var marginTop = (el.parent().height() - el.height())/2; 

    // Apply the top margin to the element 
    el.css('margin-top', marginTop); 
} 

verticalAlign($('.verticalAlign'));

출처

2012-12-23 19:02:18 JimmyRare

네 말이 맞아, 내 요소 모두 높이와 폭이 너무 역동적이다. – balping

div 안에 팝업을 중앙에 배치하는 방법은 무엇입니까?

답변

관련 문제