CSS에서 중심 스타일을 구현하기 위한 여러 기술의 장점과 단점에 대한 자세한 설명

음수 여백

이것은 아마도 현재 가장 인기 있는 사용 방법일 것입니다. 블록 요소의 크기를 알고 있는 경우 다음과 같은 방법으로 컨테이너의 콘텐츠 블록을 중앙에 배치할 수 있습니다.

외부 여백에 음수를 사용하고 크기는 너비/높이의 절반입니다(상자의 패딩 포함). -크기 조정: 테두리 상자가 사용되지 않음), 위쪽: 50% 왼쪽: 50%;. 즉:

.is-Negative {  
        width: 300px;  
        height: 200px;  
        padding: 20px;  
        position: absolute;  
        top: 50%; left: 50%;  
        margin-left: -170px; /* (width + padding)/2 */  
        margin-top: -120px; /* (height + padding)/2 */  
}

테스트 결과 이것이 IE6-IE7에서도 잘 작동하는 유일한 방법인 것으로 나타났습니다.

장점:

1. IE6-IE7과 호환되는 우수한 크로스 브라우저 기능.

2. 코드의 양이 적습니다.

단점:

1. 적응력이 없습니다. 백분율 크기 및 최소/최대 속성 설정은 지원되지 않습니다.

2. 내용물이 용기 밖으로 넘칠 수 있습니다.

3. 여백 크기는 패딩 및 box-sizing: border-box 정의 여부와 관련이 있으며 다양한 상황에 따라 계산해야 합니다.

Transforms

이것은 절대 센터링과 동일한 효과를 얻을 수 있는 가장 간단한 방법이며 관절 가변 높이 방법의 사용도 지원합니다. 콘텐츠 블록 정의 변환: 번역(-50%,-50%)에는 브라우저 제조업체의 접두사와

top: 50%; left: 50%;

코드 유형:

.is-Transformed {   
  width: 50%;  
  margin: auto;  
  position: absolute;  
  top: 50%; left: 50%;  
  -webkit-transform: translate(-50%,-50%);  
      -ms-transform: translate(-50%,-50%);  
          transform: translate(-50%,-50%);  
}

장점:˚1이 있어야 합니다. . 콘텐츠 높이가 가변적일 수 있음 内容 2. 코드 양이 적음

단점:

1. IE8은

2. 속성에 브라우저 제조업체 접두사를 작성해야 함

3. 다른 변환 효과를 방해할 수 있음

4. 어떤 경우에는 텍스트 렌더링이나 요소 경계가 흐릿하게 나타날 수 있습니다.

변환 구현 및 센터링에 대해 자세히 알아보려면 CSS-Tricks 기사 "Centering PercentageWidth/Height Elements"

Table-Cell

In을 참조하세요. 일반적으로 이는 콘텐츠 블록 높이가 실제 콘텐츠의 높이에 따라 변경되고 브라우저 호환성이 좋기 때문에 중앙 정렬을 달성하는 가장 좋은 방법일 것입니다. 가장 큰 단점은 가장 안쪽 요소를 중앙에 배치하기 위해 세 개의 요소 레이어가 필요하므로 많은 추가 마크업이 필요하다는 것입니다. HTML:

<div class="Center-Container is-Table">  
  <div class="Table-Cell">  
    <div class="Center-Block">  
    <!-- CONTENT -->  
    </div>  
  </div>  
</div>

CSS:

.Center-Container.is-Table { display: table; }  
.is-Table .Table-Cell {  
  display: table-cell;  
  vertical-align: middle;  
}  
.is-Table .Center-Block {  
  width: 50%;  
  margin: 0 auto;  
}

장점:

1. 높이 변수

2. 콘텐츠 오버플로는 상위 요소를 확장합니다.

3. 브라우저 간 호환성이 좋습니다.

단점:

추가 HTML 태그 필요

12. Inline-Block

센터링을 달성하는 매우 인기 있는 방법 기본 아이디어는 display: inline-block, Vertical-align: middle 및 pseudo-를 사용하는 것입니다. 요소는 컨테이너의 콘텐츠 블록을 중앙에 배치합니다. 콘텐츠 블록의 너비가 컨테이너의 너비보다 큰 경우, 예를 들어 긴 텍스트가 배치되는 경우 콘텐츠 블록의 너비는 컨테이너의 100%에서 0.25em을 뺀 값을 초과할 수 없습니다. 요소: after를 사용하면 콘텐츠 블록이 컨테이너 상단으로 압착됩니다. :before 콘텐츠 블록은 아래쪽으로 100% 오프셋됩니다.

콘텐츠 블록이 가능한 한 많은 수평 공간을 차지해야 하는 경우 max-width: 99%(더 큰 컨테이너의 경우) 또는 max-width: calc(100% -0.25em)(지원되는 브라우저 및 컨테이너 너비).

HTML:

<div class="Center-Container is-Inline">  
  <div class="Center-Block">  
    <!-- CONTENT -->  
  </div>  
</div>

CSS:

.Center-Container.is-Inline {   
  text-align: center;  
  overflow: auto;  
}  
  
.Center-Container.is-Inline:after,  
.is-Inline .Center-Block {  
  display: inline-block;  
  vertical-align: middle;  
}  
  
.Center-Container.is-Inline:after {  
  content: '';  
  height: 100%;  
  margin-left: -0.25em; /* To offset spacing. May vary by font */  
}  
  
.is-Inline .Center-Block {  
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */  
  /* max-width: calc(100% - 0.25em) /* Only for IE9+ */   
}

이 방법의 장점과 단점은 Table-Cell 방법과 비슷합니다. 처음에는 이 방법이 해킹 방법이기 때문에 무시했습니다. 그러나 이는 매우 널리 사용되는 사용법이며 브라우저에서 잘 지원됩니다.

장점:

1. 가변 높이

2. 콘텐츠 오버플로는 상위 요소를 확장합니다.

3. 크로스 브라우저를 지원하며 IE7에도 적합합니다.

단점:

1. 컨테이너가 필요합니다.

2. 가로 중심은 여백-왼쪽에 의존합니다: -0.25em; 이 크기는 다양한 글꼴/글꼴 크기에 맞게 조정되어야 합니다.

3. 콘텐츠 블록 너비는 컨테이너의 100%(0.25em)를 초과할 수 없습니다.

Flexbox

이것이 CSS 레이아웃의 미래 추세입니다. Flexbox는 CSS3의 새로운 속성으로, 원래 수직 센터링과 같은 일반적인 레이아웃 문제를 해결하기 위해 설계되었습니다. Flexbox는 중앙 정렬에만 사용되는 것이 아니라 열을 분할하거나 일부 레이아웃 문제를 해결하는 데에도 사용할 수 있다는 점을 기억하세요.

장점: 1. 콘텐츠 블록의 너비와 높이에는 제한이 없으며 우아하게 넘칩니다.

2. 더 복잡하고 고급 레이아웃 기술에 사용할 수 있습니다.

단점:

1 IE8/IE9는 지원되지 않습니다.

2. 본문에는 특정 컨테이너와 CSS 스타일이 필요합니다.

3. 최신 브라우저에서 실행되는 코드에는 브라우저 공급업체 접두사가 필요합니다.

4. 일부 성능 문제가 있을 수 있습니다.

제안:

각 기술에는 장점과 단점이 있습니다. 어떤 기술을 선택하는지는 지원되는 브라우저와 코딩에 따라 다릅니다. 위의 비교 차트를 사용하여 결정하는 데 도움을 받으세요.

간단한 대안으로 절대 센터링 기술이 잘 수행됩니다. 한때 음수 여백을 사용한 곳에서는 이제 대신 절대 센터링을 사용할 수 있습니다. 더 이상 귀찮은 여백 계산과 추가 마크업을 처리할 필요가 없으며 콘텐츠 블록의 크기를 조정하고 중앙에 배치할 수도 있습니다.

사이트에 가변 높이 콘텐츠가 필요한 경우 Table-Cell과 Inline-Block의 두 가지 방법을 시도해 볼 수 있습니다. 최첨단 기술을 사용하고 있다면 Flexbox를 사용해 보고 이 고급 레이아웃 기술의 이점을 경험해 보세요.

위 내용은 CSS에서 중심 스타일을 구현하기 위한 여러 기술의 장점과 단점에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!