CSS_CSS/HTML을 사용하여 DIV 레이어를 중앙에 배치하는 방법

DIV를 중앙에 배치하는 방법
주요 스타일 정의는 다음과 같습니다.

body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto MARGIN-LEFT: auto }
설명:

먼저 TEXT-ALIGN을 정의합니다. 이는 상위 요소의 콘텐츠가 IE의 중앙에 있음을 의미합니다. 이 설정이면 충분합니다. 하지만 Mozilla에서는 중앙에 위치할 수 없습니다. 해결 방법은 하위 요소 정의

를 설정할 때 "MARGIN-RIGHT: auto;MARGIN-LEFT: auto;"를 추가하는 것입니다.

이 방법을 사용하여 전체 페이지를 중앙에 배치하려면 DIV에 넣지 않는 것이 좋습니다. 각 분할 div. : auto;MARGIN-LEFT: auto;

DIV에서 이미지를 세로 중앙에 배치하는 방법
배경 방법을 사용하세요. 예:

body{BACKGROUND: url(http://www.w3cn.org/style/001/logo_w3cn_194x79.gif) #FFF no-repeat center;}
핵심은 마지막 센터 , 이 매개변수는 이미지의 위치를 ​​정의합니다. "왼쪽 위"(왼쪽 위 모서리) 또는 "오른쪽 아래" 등을 쓸 수도 있습니다. 값 "50 30"을 직접 쓸 수도 있습니다

효과는 다음과 같습니다.

DIV에서 텍스트를 세로로 가운데 맞추는 방법
텍스트인 경우 줄 간격을 늘려 세로 가운데로 맞추는 방법을 사용할 수 있습니다.

테스트 콘텐츠

설명:

vertical-align:middle; 줄 간격을 전체 DIV line-height: 200px와 동일한 높이로 늘린 다음 텍스트를 삽입하면 세로로 가운데 정렬됩니다.