CSS에서 전체를 중앙에 배치하는 방법

일반적으로 웹페이지의 주요 콘텐츠 레이아웃은 브라우저 중앙에 있습니다. 예를 들어, PHP 중국어 웹사이트의 메인 페이지는 중앙 정렬 레이아웃을 가지고 있습니다.

CSS를 사용하여 전체 웹 페이지 레이아웃을 중앙에 배치하는 방법은 무엇입니까? 레이아웃 센터링의 조건은 무엇입니까?

먼저 본문에 대한 CSS 콘텐츠 중심 스타일(css text-align:center)을 설정한 다음 가장 바깥쪽 DIV 상자를 배치할 때 객체 레이아웃을 중앙에 배치할 때 margin:0 auto를 사용해야 합니다.

물론 우리는 상자 객체에 margin:0 auto를 사용합니다. 일부 브라우저는 body 객체에 text-align:center 스타일을 추가하지 않으며 레이아웃은 여전히 ​​중앙에 있습니다. 이는 브라우저마다 기본 스타일이 다르기 때문입니다. 본문 text-align:center에 대해 설정하지 않으면 일부 브라우저의 레이아웃이 중앙에, 일부는 왼쪽에 배치되어 레이아웃 호환성이 생성됩니다.

설명: 여백: 0 자동, 즉 개체의 위쪽 및 아래쪽 간격이 0이고 왼쪽 및 오른쪽 간격이 자동으로 개체의 너비에 따라 왼쪽 및 오른쪽 간격이 자동으로 지정됨을 의미합니다. 웹 페이지 레이아웃 센터링 조건

1. CSS 콘텐츠 센터링 스타일 텍스트를 본문에 설정합니다. align:center, 코드: body{text-align:center}

2. 가장 바깥쪽 개체에 대해 margin:0 자동 스타일을 설정합니다. code: .php{margin:0 auto}

Case:

관찰용 레이아웃 센터링 효과를 달성하기 위해 CSS 명명된 개체는 ".php"이고 CSS 테두리는 검은색으로 설정되며 CSS 너비는 400px입니다. , CSS 높이는 100px입니다.

1. CSS 코드는 다음과 같습니다:

2 HTML 코드 조각:

객체 PHP 레이아웃은 중앙에 있습니다

위 내용은 CSS에서 전체를 중앙에 배치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!