CSS 절대 위치 지정 및 센터링 기술의 장점과 단점에 대한 자세한 차트

절대 센터링 기술

수평 센터링을 달성하기 위해 margin:0 auto를 자주 사용하지만 항상 margin:auto는 수직 센터링을 달성할 수 없다고 생각합니다... 실제로 수직 센터링을 달성하려면 높이와 높이만 선언하면 됩니다. CSS:

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

장점:

1. IE8-IE10을 포함한 크로스 브라우저를 지원합니다.

2. 다른 특수 태그가 필요하지 않으며 CSS 코드도 적습니다.

3. min-/max- 속성

4. 모든 콘텐츠 블록의 중심 정렬을 달성하려면 이 클래스만 사용하세요.

5. 패딩 설정 여부에 관계없이 중심 정렬이 가능합니다(box-sizing 속성을 사용하지 않음)

6. 콘텐츠 블록을 다시 그릴 수 있습니다.

7. 이미지 센터링을 완벽하게 지원합니다.

단점:

1. 높이를 선언해야 합니다(변수 높이 참조).

2. 콘텐츠가 범위를 벗어나는 것을 방지하려면 Overflow:auto를 설정하는 것이 좋습니다. (오버플로 참조)

3. Windows Phone 장치에서는 작동하지 않습니다.

브라우저 호환성:

Chrome, Firefox, Safari, Mobile Safari, IE8-10.

절대 위치 지정 방법은 최신 버전의 Chrome, Firefox, Safari, Mobile Safari, IE8-10에서 테스트 및 통과되었습니다.

비교표:

절대 센터링 방법이 이를 달성하는 유일한 방법은 아니며 수직 센터링을 달성하는 다른 방법이 있으며 각각 고유한 장점이 있습니다. 사용하는 기술은 브라우저가 해당 기술을 지원하는지 여부와 사용하는 언어 태그에 따라 다릅니다. 이 비교표는 귀하의 필요에 따라 올바른 선택을 하는 데 도움이 될 것입니다.

Technique	브라우저 지원	반응형	Overflow	resize:both	가변 높이	주요 주의사항
절대 센터링	Modern & IE8+	Yes	스크롤, 컨테이너 오버플로 가능	Yes	예*	가변 높이않음 완벽한 크로스 브라우저
음수 여백	All	No	Scroll	크기는 조정되지만 크기는 조정되지 않습니다. 중앙에 머물지 마세요	No	응답하지 않음, 여백은 수동으로 계산해야 함
Modern & IE9+ 응	스크롤 , 컨테이너가 오버플로될 수 있습니다	예	예	흐릿한 렌더링
Table-Cell	최신 및 IE8+	예	컨테이너 확장	아니요	예	추가 마크업
인라인 블록	최신, IE8+ 및 IE7*	예	컨테이너 확장	아니요	예	필요 컨테이너, 해키 스타일
Flexbox	Modern & IE10+	예	스크롤, 컨테이너 오버플로 가능	예	예	컨테이너, 공급업체 접두사 필요

설명:

위 설명을 통해 Absolute Centering의 작동 메커니즘은 다음과 같이 설명할 수 있습니다.

1. 일반적인 콘텐츠 흐름(일반적인 콘텐츠 흐름)에서 margin: auto 효과는 margin-top:0;margin-bottom:0과 동일합니다.

W3C는 'margin-top' 또는 'margin-bottom'이 'auto'인 경우 사용된 값은 0입니다. position:absolute는 절대 위치 지정 블록이 콘텐츠 흐름에서 벗어나게 합니다. 나머지 부분을 렌더링할 때 절대 위치에 있는 부분은 렌더링되지 않습니다.

Developer.mozilla.org:...절대적으로 위치하는 요소는 흐름에서 빠져나와서 up no space

3. 위쪽: 0; 아래쪽: 0; 오른쪽: 0; 이 때 블록은 사용 가능한 모든 공간을 채웁니다. 에서 상위 요소는 일반적으로 position:relative;로 선언된 본문 또는 컨테이너입니다.

Developer.mozilla.org:절대 위치에 있는 요소의 경우 위쪽, 오른쪽, 아래쪽 및 왼쪽 속성은 오프셋을 지정합니다.

4. 콘텐츠 블록에 높이나 너비를 설정하면 콘텐츠 블록이 사용 가능한 모든 공간을 차지하지 않고 브라우저에 새 경계 상자를 조정하라는 메시지가 표시됩니다. 새로운 경계 상자에 따라 여백 재계산:auto

Developer.mozilla.org: 그런 다음 [절대 위치] 요소의 여백이 이 오프셋 내부에 배치됩니다.

5. 일반적인 콘텐츠 흐름에서 브라우저는 margin-top과 margin-bottom에 동일한 값을 부여하여 이전에 정의된 경계 내에서 요소 블록을 중앙에 배치합니다.

W3.org: 세 가지 [상단, 하단, 높이] 중 어느 것도 '자동'이 아닌 경우: 'margin-top'과 'margin-bottom'이 모두 'auto'인 경우 다음을 해결하세요. 두 개의 여백이 동일한 값을 얻는 추가 제약 조건 하의 방정식입니다. 일명: 블록을 수직으로 가운데에 배치합니다

margin:auto는 절대 센터링(Absolute Centering)을 위해 설계된 것 같으므로 절대 센터링(Absolute Centering)은 현대와 호환되어야 합니다. 표준을 준수하는 브라우저.

간단히 말하면(TL;DR): 절대 위치의 요소는 일반적인 콘텐츠 흐름에서 렌더링되지 않으므로 margin:auto는 top: 0; left: 0; ; 내부 수직 중앙에 위치.

위 내용은 CSS 절대 위치 지정 및 센터링 기술의 장점과 단점에 대한 자세한 차트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!