CSS 절대 위치 지정을 사용하여 센터링을 달성하는 8가지 방법에 대한 자세한 코드 설명

절대적으로 배치된 요소는 일반적인 콘텐츠 흐름에서 렌더링되지 않으므로 margin:auto는 top: 0; left: 0; Bottom: 0;으로 설정된 경계 내에서 콘텐츠를 수직으로 가운데에 배치할 수 있습니다.

센터링 방법:

1. 컨테이너 내

콘텐츠 블록의 상위 컨테이너는 위치:상대적으로 설정됩니다. 위의 절대 센터링 방법을 사용하면 콘텐츠가 상위 컨테이너의 중앙에 표시될 수 있습니다.

.Center-Container {
  position: relative;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

아래의 나머지 데모에는 기본적으로 위의 CSS 스타일이 포함되어 있습니다. 이를 기반으로 사용자가 다양한 기능을 달성하기 위해 추가할 수 있는 추가 클래스만 제공됩니다.

2. 뷰포트 내

콘텐츠 블록이 눈에 보이는 영역 내에 머물기를 원하시나요? 콘텐츠 블록을 position:fixed로 설정하고 더 큰 Z-색인 스택 속성 값을 설정합니다.

.Absolute-Center.is-Fixed {
  position: fixed;
  z-index: 999;
}

참고: 모바일 Safari의 경우 콘텐츠 블록이 position:relative;로 설정된 상위 컨테이너에 배치되지 않은 경우 콘텐츠 블록은 표시 영역 내에서 수직 중앙에 배치되는 대신 전체 문서에서 수직 중앙에 배치됩니다.

3. 사이드바(오프셋)

고정 헤더를 설정하거나 다른 사이드바를 추가하려면 콘텐츠 블록의 스타일에 다음과 같은 CSS 스타일 코드만 추가하면 됩니다: top:70px;bottom:auto; margin:auto;를 선언하면 콘텐츠 블록은 위쪽, 왼쪽, 아래쪽 및 오른쪽 속성을 통해 정의한 경계 상자 내에서 수직으로 중앙에 배치됩니다.

콘텐츠 블록을 화면 왼쪽이나 오른쪽에 고정하고 콘텐츠 블록을 수직 중앙에 유지할 수 있습니다. 화면 오른쪽에 고정하려면 right:0;left:auto;를 사용하고 화면 왼쪽에 고정하려면 left:0;right:auto;를 사용합니다.

.Absolute-Center.is-Right {
  left: auto; right: 20px;
  text-align: right;
}

.Absolute-Center.is-Left {
  right: auto; left: 20px;
  text-align: left;
}

4. 반응형/적응형(반응형)

절대 센터링의 가장 큰 장점은 백분율 형식의 너비와 높이를 완벽하게 지원한다는 것입니다. min-width/max-width 및 min-height/max-height 속성도 적응형 상자 내에서 예상대로 작동합니다.

.Absolute-Center.is-Responsive {
  width: 60%; 
  height: 60%;
  min-width: 200px;
  max-width: 400px;
  padding: 40px;
}

콘텐츠 블록 요소에 패딩을 추가해도 콘텐츠 블록 요소의 절대 중심 배치에는 영향을 미치지 않습니다.

5. 오버플로(Overflow)

콘텐츠 높이가 블록 요소나 컨테이너(위치:상대적으로 설정된 뷰포트 또는 상위 컨테이너)보다 크면 콘텐츠가 블록 외부에 표시될 수 있습니다. 잘림으로 인해 표시가 불완전해집니다(콘텐츠 블록의 오버플로 속성이 각각 표시 및 숨김으로 설정된 경우의 성능에 해당).

오버플로 추가: 자동은 콘텐츠 높이가 컨테이너 높이를 초과할 때 경계를 넘지 않고 콘텐츠 블록에 대한 스크롤 막대를 표시합니다.

.Absolute-Center.is-Overflow {
  overflow: auto;
}

콘텐츠 블록 자체가 패딩을 설정하지 않은 경우 max-height: 100%를 설정하여 콘텐츠 높이가 컨테이너 높이를 초과하지 않도록 할 수 있습니다.

6. 크기 조정

중앙 크기를 수동으로 다시 계산할 필요 없이 다른 클래스나 자바스크립트 코드를 사용하여 콘텐츠 블록을 중앙에 맞추면서 다시 그릴 수 있습니다. 물론 사용자가 콘텐츠 블록을 끌어서 놓아 다시 그릴 수 있도록 크기 조정 속성을 추가할 수도 있습니다.

절대 센터링은 콘텐츠 블록이 다시 그려지는지 여부에 관계없이 콘텐츠 블록이 항상 중앙에 위치하도록 보장합니다. min-/max-를 설정하여 필요에 따라 콘텐츠 블록의 크기를 제한하고 콘텐츠가 창/컨테이너를 넘지 않도록 방지할 수 있습니다.

.Absolute-Center.is-Resizable {
  min-width: 20%;
  max-width: 80%;
  min-height: 20%;
  max-height: 80%;
  resize: both;
  overflow: auto;
}

resize:both 속성을 사용하지 않는 경우 CSS3 애니메이션 속성 전환을 사용하여 다시 그려진 창 사이를 부드럽게 전환할 수 있습니다. 다시 그려지는 콘텐츠 블록 크기가 콘텐츠의 실제 크기보다 작아지는 것을 방지하려면 Overflow:auto를 설정해야 합니다.

절대 센터링은 수직 센터링을 달성하기 위해 resize:both 속성을 지원하는 유일한 기술입니다.

참고:

1. 콘텐츠 블록의 패딩을 보충하려면 max-width/max-height 속성을 설정해야 합니다. 그렇지 않으면 오버플로될 수 있습니다.

2. 모바일 브라우저 및 IE8-IE10 브라우저는 크기 조정 속성을 지원하지 않으므로 사용자 경험의 이 부분이 필요한 경우 사용자 크기 조정을 위한 가능한 후퇴가 있는지 확인하십시오.

3. 크기 조정 및 전환 속성을 함께 사용하면 사용자가 다시 그릴 때 전환 애니메이션 지연 시간이 생성됩니다.

7. 이미지

절대 센터링은 사진에도 적용됩니다. 이미지 자체에 클래스 또는 CSS 스타일을 적용하고 이미지에 height:auto 스타일을 추가합니다. 이미지는 중앙에 적응적으로 표시됩니다. 외부 컨테이너의 크기를 조정할 수 있으면 컨테이너가 다시 그려집니다. 그에 따라 다시 그려지고 항상 중앙에 유지됩니다.

height:auto는 이미지를 중앙에 맞추는 데 유용하지만 height:auto가 이미지의 외부 콘텐츠 블록에 적용되면 몇 가지 문제가 발생할 수 있습니다. 일반 콘텐츠 블록이 전체 콘텐츠 블록을 채우기 위해 늘어납니다. 컨테이너. 이때, 이 문제를 해결하기 위해 가변 높이(Variable Height)를 사용할 수 있습니다. 문제의 원인은 이미지를 렌더링할 때 이미지 높이를 계산해야 하기 때문일 수 있습니다. 이는 이미지 높이를 직접 정의하는 것과 같습니다. 브라우저가 이미지 높이를 얻은 후에는 margin:auto를 구문 분석하지 않고 수직으로 가운데에 배치합니다. 다른 상황처럼. 따라서 이러한 스타일을 상위 요소보다는 이미지 자체에 적용하는 것이 좋습니다.

HTML:

<img src="http://placekitten.com/g/500/200" class="Absolute-Center is-Image" alt="" />

CSS:

.Absolute-Center.is-Image {
  height: auto;
}

.Absolute-Center.is-Image img { 
  width: 100%;
  height: auto;
}

8. 가변 높이

这种情况下实现绝对居中（AbsoluteCentering）必须要声明一个高度，不管你是基于百分比的高度还是通过max-height控制的高度，还有，别忘了设置合适的overflow属性。对自适应/响应式情景，这种方法很不错。

与声明高度效果相同的另一种方法是设置display:table;这样无论实际内容有多高，内容块都会保持居中。这种方法在一些浏览器（如IE/FireFox）上会有问题，我的搭档Kalley

在ELL Creative（访问ellcreative.com ）上写了一个基于Modernizr插件的检测函数，用来检测浏览器是否支持这种居中方法，进一步增强用户体验。

Javascript：

/* Modernizr Test for Variable Height Content */
Modernizr.testStyles('#modernizr { display: table; height: 50px; width: 50px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }', function(elem, rule) {
  Modernizr.addTest('absolutecentercontent', Math.round(window.innerHeight / 2 - 25) === elem.offsetTop);
});

CSS：

.absolutecentercontent .Absolute-Center.is-Variable {
  display: table;
  height: auto;
}

浏览器兼容性不太好，若Modernizr不能满足你的需求，你需要寻找其他方法解决。

1.      与上述重绘(Resizing)情况的方法不兼容

2.      Firefox/IE8:使用display:table会使内容块垂直居上，不过水平还是居中的。

3.      IE9/10: 使用display:table会使内容块显示在容器左上角。

4.      Mobile Safari:内容块垂直居中；若使用百分比宽度，水平方向居中会稍微偏离中心位置。

위 내용은 CSS 절대 위치 지정을 사용하여 센터링을 달성하는 8가지 방법에 대한 자세한 코드 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!