가변 높이 div 내 세로 가운데 맞춤

Question

페이지를 중간에 두 개의 수직 열, # split-left 및 # split-right로 분할했습니다. 각 열은 페이지 너비의 50 %입니다.

필드의 수가 변경되면 왼쪽 열에 잠재적으로 가변 높이가있는 연락처 양식입니다.

오른쪽에서 # split-right의 높이와 # split-left의 높이를 같게하고 텍스트를 세로 가운데로 정렬하고 싶습니다.

방법에 대한 아이디어가 있으십니까?

감사합니다.

Answer 1

#regular-page { display: table; } 
#split-left { display: table-cell; width: 50%; } 
#split-right { 
    display: table-cell; 
    width: 50%; 
    vertical-align: middle; 
    background-color: #F7F7F7; 
} 

모바일보기에서 레이아웃이 깨집니다. #content { width: 320px; }은 삭제할 수 있지만 여전히 중단됩니다.