왜 `margin: auto auto;`가 Div를 수직 중앙에 배치하지 않습니까?

margin:auto를 사용하여 Div 수직 정렬

While margin: 0 auto; div를 수평으로 중앙에 배치할 수 있습니다. margin: auto auto; 의도한 대로 수직으로 정렬되지 않습니다. 또한 수직 정렬: 중간; 블록 수준 요소에는 효과가 없습니다.

세로 자동 여백이 실패하는 이유

• margin-top: auto 및 margin-bottom: auto 0으로 계산, 센터링 없음 effect.
• margin-top: -50%는 높이가 아닌 포함 블록의 너비를 기준으로 값을 계산합니다.

중첩 요소를 사용한 해결 방법

실행 가능한 해결 방법 중 하나는 세 개의 중첩을 포함하는 것입니다. 요소:

.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>

이 솔루션에서:

• 외부 .container 요소는 테이블과 같은 구조를 설정합니다.
• .helper 요소는 콘텐츠는 수직 중간점에 위치합니다.
• .content div는 .helper 내에 위치하며 다음과 같이 표시될 수 있습니다. 여백을 사용하여 가로 가운데 맞춤: 0 auto;.

위 내용은 왜 `margin: auto auto;`가 Div를 수직 중앙에 배치하지 않습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!