CSS 상단 및 하단 중앙 정렬 구현 방법: 1. 인라인 요소의 단일 행 높이를 상자 높이와 동일하게 설정합니다. 2. 다중 행 인라인 요소를 사용하여 "display:table-cell; 및 수직-"을 설정합니다. align: middle;"을 상위 요소에; "그게 다입니다.
CSS에서 위쪽 및 아래쪽 센터링은 수직 센터링이기도 합니다. CSS에는 요소를 기반으로 하는 세 가지 수직 센터링 방법이 있는데, 이는 단일 라인 인라인 요소, 다중 라인 인라인 요소 및 블록 요소의 수직 센터링입니다. 자세한 소개는 다음과 같습니다.
한 줄 인라인 요소
한 줄 인라인 요소에 대해 "행 높이를 상자 높이와 동일"로 설정하기만 하면 됩니다.
<style> #father { width: 500px; height: 300px; background-color: skyblue; } #son { background-color: green; height: 300px; } </style> <div id="father"> <span id="son">我是单行的行内元素</span> </div>
효과:
여러 줄 인라인 요소
display:table-cell; 및 Vertical-align: middle;을 상위 요소로 설정하세요.
<style> #father { width: 500px; height: 300px; background-color: skyblue; display: table-cell; vertical-align:middle; } #son { background-color: green; } </style> <div id="father">
저는 여러 줄 인라인입니다. 요소 나는 여러 줄이 있는 인라인 요소입니다. 나는 여러 줄이 있는 인라인 요소입니다. 나는 여러 줄이 있는 인라인 요소입니다. 여러 줄이 있는 인라인 요소입니다.
< ;/div>
효과:
블록 수준 요소
옵션 1: 위치 지정 사용
먼저 상위 요소를 상대 위치로 설정한 다음 하위 요소를 절대 위치로 설정하고 하위 요소 상단을 50%로 설정합니다. 즉, 하위 요소의 왼쪽 상단 모서리를 수직으로 가운데에 배치합니다.
고정 높이: 설정 절대 하위 요소의 여백 상단: -요소 높이의 절반 픽셀; 또는 변환 설정:translateY(-50%);
<style> #father { width: 500px; height: 300px; background-color: skyblue; position: relative; } #son { height: 100px; background-color: green; position: absolute; top: 50%; margin-top: -50px; } </style> <div id="father"> <div id="son">我是块级元素</div> </div>
가변 높이: 새로운 CSS3 속성 사용 변환:translateY(-50%);
<style> #father { width: 500px; height: 300px; background-color: skyblue; position: relative; } #son { width: 100px; background-color: green; position: absolute; left: 50%; transform: translateY(-50%); } </style> <div id="father"> <div id="son">我是块级元素</div> </div>
효과:
옵션 2: flexbox 레이아웃 사용(높이는 고정되거나 가변적일 수 있음)
flexbox 레이아웃을 사용하고 속성만 추가하세요. display: align-items: center; :
관련 튜토리얼:
CSS 비디오 튜토리얼위 내용은 CSS에서 상단과 하단을 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!