CSS에서 Div를 수직 중앙에 배치하는 방법은 무엇입니까?

margin:auto를 사용하여 Div를 세로 중앙에 배치

While margin:O auto; div를 가로 중앙에 배치, margin:auto auto; 수직으로 중앙에 두지 않습니다. 불행하게도 수직 정렬:중간; div와 같은 블록 수준 요소에도 작동하지 않습니다.

제한 사항:

• vertical-align:middle;: 아님 블록 수준 요소에 적용 가능
• margin-top:auto 및 margin-bottom:auto: 계산된 값은 0입니다.
• margin-top:-50%;: 백분율 기반 여백 값은 포함 블록의 너비를 기반으로 합니다.

세로 중심 맞추기 해결 방법:

문서 흐름 및 요소 높이 계산의 특성으로 인해 상위 요소 내에서 수직 중앙 정렬에 여백을 사용할 수 없습니다. 그러나 다음 해결 방법으로 문제를 해결할 수 있습니다.

중첩 요소 접근 방식:

이를 위해서는 다음과 같이 세 가지 요소를 중첩해야 합니다.

.container {
  display: table;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;
}

.helper {
  display: table-cell;
  vertical-align: middle;
  position: absolute;
  top: 50%;
}

.content {
  position: relative;
  top: -50%;
  margin: 0 auto;
  width: 200px;
  border: 1px solid orange;
}

<div class="container">
  <div class="helper">
    <div class="content">
      <p>stuff</p>
    </div>
  </div>
</div>

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