CSS의 골치 아픈 문제는 수직 센터링입니다. 수직 센터링을 달성하는 방법에는 여러 가지가 있지만 각 방법에는 특정 제한이 있으므로 실제 비즈니스 시나리오에 따라 수직 센터링을 사용할 수 있습니다.
1. 컨테이너 내부의 내용은 단 한 줄의 텍스트입니다
<!DOCTYPE html>
<html>
<style>
* {
padding: 0;
margin: 0;
}
div {
height: 60px;
background-color: #1888fa;
color: white;
}
span {
line-height: 60px;/* 设置一个大的行高，让它等于理想的容器高度。
这样会让容器高度扩展到能够容纳行高。如果内容不是行内元素，可以设置为inline-block。 */
}
</style>
<body>
<div>
<span>测试</span>
</div>
</body>
</html>2. 컨테이너의 자연스러운 높이
위쪽과 아래쪽 패딩이 동일하면 컨테이너와 콘텐츠가 자체 높이를 결정하도록 합니다. padding-top 和padding-bottom를 동일한 값으로 설정하여 상위 컨테이너의 콘텐츠를 세로 중앙에 배치하는 아래 예를 살펴보세요.
<!DOCTYPE html>
<html>
<style>
* {
padding: 0;
margin: 0;
}
div {
padding-top: 20px;
padding-bottom: 20px;
background-color: #1888FA;
color: white;
}
</style>
<body>
<div>
<span>测试</span>
</div>
</body>
</html>3. FlexBox
<!DOCTYPE html>
<html>
<style>
* {
padding: 0;
margin: 0;
}
div {
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background-color: #1888fa;
color: white;
}
</style>
<body>
<div>
<span>测试</span>
</div>
</body>
</html>사용: "2021 CSS 면접 질문 요약(최신)"
위 내용은 CSS 요소가 수직으로 중앙에 배치됨의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
