일반적으로 DIV를 세로, 가로로 지정된 높이로 중심을 맞추는 것이 더 편리하지만, 높이가 정해져 있지 않으면 조금 더 번거롭습니다. 시도해 보았는데, 표준과 호환되는 보조 DIV 2개를 통해 절대 중심을 맞추었습니다. IE, FF와 같은 브라우저.
CSS 코드:
#wrapper{height:100%;width:100%;overflow:hidden;position:relative}
#래퍼[id]{디스플레이:테이블;}
#중간{위치: 절대;상단:50%;왼쪽:50%}
#mid[id]{display:table-cell;left:0;vertical-align:middle;position:static}
#box{위치:상대;위:-50%;왼쪽:-50%;z-색인:9999;너비:300px}
#box[id]{왼쪽:0;여백:0 자동;}
div.boxstyle{border:2px solid #000;text-align:center;padding:5px;}
XHTML 코드:
http://bolm.cn
DIV 절대 중심 예시
간단히 설명하면 Wrapper는 바깥쪽 레이어, Mid는 중간 레이어, Box는 절대 중심 레이어입니다.
FF와 같은 표준 브라우저에서는 래퍼 레이어의 표시 모드를 테이블로 설정하고 중간 레이어를 테이블-셀 표시 모드로 설정할 수 있으므로 Vertical-align:middle을 사용하여 중간 레이어의 절대 수직 중앙 정렬을 달성할 수 있습니다. IE에서는 수직 센터링을 달성하기 위해 top:50% 방법과 후속 상자에서 설정한 -50%의 상대 위치 지정이 사용됩니다. 수평 센터링 방법도 다릅니다. FF는 이를 달성하기 위해 단순히 여백을 설정할 수 있지만 IE는 서로 오프셋되도록 왼쪽을 설정합니다.
또한 #box[id]와 같은 표현은 FF 등의 표준 브라우저에서만 인식되므로 여기서는 FF 등의 브라우저에 속하는 스타일을 설정할 수 있습니다.
상자의 높이는 설정되지 않았으므로 기본값은 가변 높이의 자동이고 가변 너비의 경우에도 마찬가지입니다.