CSS 세로 중간에 DIV 정렬

Question

컨테이너의 높이를 모르는 경우 가로 및 세로로 div div 요소를 가운데에 놓으려고합니다.

절대 위치 지정을 통해 문서의 전체 높이와 너비에 맞게 컨테이너 요소를 설정했지만 수직 정렬을 얻을 수 없습니다.

LIVE DEMO

.ui .chv { 
    text-align: center; 
    position: absolute; 
    top: 60px; 
    bottom: 50px; 
    left: 20px; 
    right: 20px; 
    display: block; 
    margin: 0; 
    height: auto; 
    background: green; 
    text-align: center; 
    vertical-align: middle; 
} 

Answer 1

수직 정렬 : 테이블 셀 스타일 : 사업부가 표시가있는 경우 중간 작동합니다. 와 사업부를 이렇게 최종 마크 업이

처럼 될 것

넣고 다음 HTML <div class="chv"></div>

<div class="table full-width full-height">   
      <div class="table-cell align-middle"> 
       TEST 
      </div> 
</div> 

내부 테이블 : "디스플레이 : 테이블 셀은"부모 디스플레이 사업부 있어야한다

<div align="center" class="ui"> <div class="chv"> <div class="table full-width full-height"> <div class="table-cell align-middle"> TEST </div> </div> </div> </div>​ 

여기를 참조하십시오. jsfiddle

폭과 높이를 100 %로 설정하기 위해 .full-width, .full-height 클래스를 추가했습니다.