상위 요소의 높이를 설정했음에도 불구하고 여전히 수직 중심을 달성할 수 없는 이유는 무엇입니까?

Question

mx-auto类，但是尽管我的myContainerFixed类成功显示高度固定，但我无法使my-auto수업을 업무에 활용할 수 있었습니다.

예제 CSS

으아악

이 경우에 이것이 최선의 선택은 아니지만 절대 위치 지정을 사용해 보았지만 역시 작동하지 않았습니다. 예는 다음과 같습니다

으아악

HTML 코드

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.my-auto {
    margin-top: auto;
    margin-bottom: auto;
}

.myContainerFixed {
    height: 90vh;
}
@screen lg {
    .myContainerFixed {
        height: 85vh;
    }
}

.w-max {
    width: max-content;
}

Answer 1

최상위 요소(myContainerFixed)의 display: block(기본값)과 관련이 있습니다.

예를 들어, display: flex를 지정하면 이 문제가 해결됩니다

으아악

mx-auto 및 my-auto를 제거하고 flex 속성을 사용하여 양식 위치를 지정하는 것이 좋습니다

으아악