센터 높이

Question

나는이 사업부를 만들기 위해 노력하고있어 기반으로 동적 평방 사업부 :

윈도우의 중앙에 동적으로 창
C의 높이에 따라 크기로) 광장
B)) (가로 및 세로로)

그리고 나는 한 번에 3 개 모두를 얻을 수 없습니다. 나는 SO 주변을 많이 둘러 보았고 트릭 (display:table-cell, :before 요소 등) 중 아무 것도 나를 위해 작동하지 않는 것 같습니다. 내가 얻은 가장 가까운 것은이 두 개의 JSFiddles에서 볼 수 있습니다. http://jsfiddle.net/LN78N/ 및 http://jsfiddle.net/EKarx/ (둘 다 창의 크기를 조정하려고 시도 할 때까지)

크기가 조정 된 JSFiddle을 다시 실행하면 올바른 모양과 크기를 찾습니다. 따라서 상자가 잘 표시되는 일종의 피드백 루프가 실행 된 것 같습니다. , 제대로 리플 로우되지는 않습니다.

왜 이런 일이 발생했는지 또는 내가하려는 일을 성취하는 방법에 관한 모든 의견은 인정 될 것입니다. 감사!

Answer 1

은 (최신 브라우저에서 see fiddle) CSS3 단위 및 값에서 vh unit를 사용하여이 작업을 수행하는 것은 매우 간단하다

.square { 
    background: #ccc; 
    height: 60vh; 
    width: 60vh; 
    margin: 20vh auto; 
}