CSS를 사용하여 Div를 수직 중앙에 어떻게 배치할 수 있나요?

Margin:Auto를 사용하여 Div를 수직으로 정렬

div를 수평으로 가운데 정렬할 때 일반적으로 사용되는 기술은 margin: 0 auto입니다. . 그러나 수직 정렬의 경우 margin:auto 자동 구문이 예상대로 작동하지 않습니다.

Why Vertical-Align:Middle이 작동하지 않는 이유

또 다른 잠재적인 해결책은 수직 정렬: 중간, 다음과 같은 블록 수준 요소가 아닌 인라인 수준 요소에만 적용 가능하기 때문에 실패합니다. divs.

세로 정렬을 위한 여백 제한

margin: auto를 사용하면 세로로 문제가 발생합니다.

• Margin-top: auto 및 margin-bottom: 자동으로 사용된 값이 0이 됩니다.
• Margin-top: -50% 높이가 아닌 포함 블록의 너비를 기준으로 계산합니다.

세로 정렬에 대한 해결 방법

여백을 사용하여 div를 세로로 정렬할 수 없는 경우는 다음과 같습니다. 실망스럽습니다. 해결 방법이 있습니다. 널리 사용되는 접근 방식 중 하나는 세 가지 요소를 중첩하는 것입니다.

.container {
  display: table;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;
}
.helper {
  position: absolute;
  top: 50%;
  display: table-cell;
  vertical-align: middle;
}
.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>

이 기술은 상위 컨테이너 내에서 div를 수직으로 중앙에 효과적으로 배치합니다.

위 내용은 CSS를 사용하여 Div를 수직 중앙에 어떻게 배치할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!