CSS는 알 수 없는 높이의 수직 중심 문제를 해결합니다_CSS/HTML

별도의 언급이 없는 한, 이 사이트의 콘텐츠는 공유 승인을 통해 제작되었으며, 귀하의 노력의 결실을 존중해 주시기 바랍니다.

원제: CSS의 수직 센터링

부제: 키를 알 수 없는 유후의 확실한 솔루션

번역: 숲간

CSS의 수직 정렬 기능이 있지만 높이를 알 수 없는 수직 센터링 문제(DIV 태그에 높이를 알 수 없는 텍스트나 이미지가 있는 경우)를 효과적으로 해결할 수 없습니다.

Mozilla, Opera, Safari 등 표준 브라우저의 경우 상위 요소의 표시 모드를 TABLE(display: table;)로, 내부 하위 요소의 표시 모드를 table-cell(display: table-cell)로 설정할 수 있습니다. ) 수직 정렬 기능을 사용하면 수직으로 중앙에 배치되지만 비표준 브라우저에서는 지원되지 않습니다.

비표준 브라우저는 하위 요소를 상단에서 50%로 설정한 다음 상단에서 -50% 거리에 요소를 넣어 오프셋할 수 있습니다.

CSS
body {패딩: 0; 여백: 0;}
body,html{높이: 100%;}
#outer {높이: 100%; 위치: 상대; width: 100%; background:ivory;}
#outer[id] {display: table; position: static;}
#middle {position:absolute; top: 50%;} /* 탐색기에만 해당* /
#middle[id] {display: table-cell; 수직 정렬: middle; position: static;}
#inner {position:relative; top: -50%;width: 400px;margin: 0 auto;} /* Explorer 전용 */
div.greenBorder {border: 1px solid green;}

XHTML

위 CSS 코드의 장점은 해킹이 없으며 IE에서 지원하지 않는 CSS2 선택기 #value[id]를 사용한다는 것입니다.

CSS2 선택기 #value[id]는 선택기 #value와 동일하지만 Internet Explorer는 이러한 유형의 선택기를 지원하지 않습니다. 마찬가지로 .value[class]는 .value와 동일하며 표준 브라우저에서만 읽을 수 있습니다.

테스트: Firefox1.5, Opera9.0, IE6.0, IE5.0을 통과했습니다.