세로 맞춤 비율 Div

Question

div를 다른 div 안에 세로 정렬하려고합니다. 두 가지 모두 백분율 높이가 있기 때문에 문제가 발생합니다. 여기 내 jsfiddle입니다 : http://jsfiddle.net/QeF23/1/

html, body { 
    height: 100%; 
    padding: 0px; 
    margin: 0px; 
} 
#outerdiv { 
    height: 50%; 
    width: 100%; 
    background-color: #000000; 
}  
#innerdiv { 
    height: 90%; 
    background-color: red; 
    float: right; 
} 

내가 비율의 높이를하지 않은 경우는 해결하기 매우 쉬운 것입니다.

디스플레이를 사용해 보았습니다. 표 셀 방법을 사용해도 작동하지 않았습니다. 나는 그것을 잘못 구현하고있을 수 있습니다.

도움을 주시면 감사하겠습니다.

Answer 1

귀하의 JS 바이올린은 제대로 표시 - 당신이 중간에 정렬하려는 경우 어쩌면

#outerdiv { 
    height: 50%; 
    width: 100%; 
    background-color: #000000; 
    position:absolute; 
    top:25%; 
}   

편집을 추가하려고 - 당신은 검은 색의 중앙에 붉은 사업부를 원하는 경우 - 같은 원리를 사용

를

http://jsfiddle.net/QeF23/30/

#outerdiv { 
    height: 50%; 
    width: 100%; 
    background-color: #000000; 
    position:absolute; 
    top:25%; 
}  
#innerdiv {; 
    position:absolute; 
    width: 100%; 
    top:5%; 
    height: 90%; 
    background-color: red; 
} 

Answer 2

이 문서 http://css-tricks.com/centering-in-the-unknown/에서 읽기 되세요. 기사 마지막 부분에서 그는 유령 요소를 사용하여 트릭을 설명합니다. 나는 전에 그것을 시도하고 완벽하게 나를 위해 일하고있어.