CSS 요소가 수직으로 중앙에 배치됨
- autoload원래의
- 2021-04-06 16:04:031693검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS에서 왜곡이란 무엇을 의미합니까?다음 기사：CSS에서 왜곡이란 무엇을 의미합니까?