'margin: auto'를 사용하여 DIV를 수직 중앙에 배치할 수 있나요?

여백을 사용하여 DIV 수직 정렬: 자동

질문:

여백을 사용하여 DIV를 수직으로 가운데 정렬할 수 있습니까? :자동 자동;? 수직 정렬을 수행하지 않는 이유: 중간; 일?

답변:

마진 관련:

안타깝게도 margin:auto auto; 수직 센터링을 달성하지 못합니다. 수직 정렬을 위한 DIV와 같은 블록 수준 요소에는 여백이 적용되지 않습니다. 결과적으로 margin:top:auto 및 margin-bottom:auto는 효과가 없습니다.

vertical-align:middle;:

vertical-align:middle;과 관련하여; DIV와 같은 블록 수준 요소가 아닌 인라인 요소에만 적용 가능합니다.

해결 방법:

여백을 사용하여 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>

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