수직 센터링은 다양한 곳에서 사용되고 솔루션도 다양합니다.
알려진 요소 너비 위치 위치 지정 + 음수 여백 방법을 사용할 수 있습니다.
절대 위치 지정 + 4방향 모두 0px + 여백: 자동 가능 상위 컨테이너를 기준으로 수평 센터링을 달성합니다. 수직 센터링만 필요한 경우 왼쪽과 오른쪽을 삭제할 수 있으며 수평 센터링 방법은 다양합니다.
절대 위치 지정 + 왼쪽 50% + 왼쪽 여백: 음수 값 절반 width 가로로 가운데 맞춤 가능, 오른쪽도
절대 위치 지정 + 상단 50% + 여백 상단 가능: 음수 값 높이의 절반은 세로로 가운데 맞춤 가능, 하단도
코드 보기
알 수 없는 요소 너비 위치 위치 지정 + 변환:변환(x, y)을 사용하여 이동할 수 있습니다.
절대 위치 지정 + 상단 50% + 하단 50% + 변환:변환(-50%, - 50%) 세로 중심 맞추기
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .wrapper{ width: 500px; height: 500px; background: #f90; left: 0; right: 0; top: 0; bottom: 0; position: absolute; margin: auto; /*绝对定位 + 4个方向全部0px + margin:auto 可以做到基于父容器水平垂居中*/ /*如果只需要垂直居中,那可以把left和right删掉,并且水平居中的方法也很多*/ } .content{ width: 100px; height: 200px; background: #0f8; position: absolute; /*position: absolute基于第一个不是position:static的父级元素定位*/ left: 50%; top: 50%; margin-left: -50px; margin-top: -100px; /*绝对定位 + 左50% + margin左:宽度一半的负值 可以做到水平居中 右也可以*/ /*绝对定位 + 上50% + margin上:高度一半的负值 可以做到垂直居中 底部也可以*/ } </style> </head> <body> <p class="wrapper"> <span class="content"></span> </p> </body></html>
img 이미지 p에서는 수직 중앙에 위치합니다 :
vertical-align:middle을 사용할 수 있지만 이 속성은 인라인 블록 유형의 요소에서만 작동합니다(인라인도 영향을 미칩니다). 계속해서 수직 정렬에 대해 알아보세요.
방법 1: 이미지 수직 정렬:중간 + 상위 요소의 높이가 줄 높이와 일치합니다
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .wrapper{ width: 500px; height: 500px; background: #f90; left: 0; right: 0; top: 0; bottom: 0; position: absolute; margin: auto; /*绝对定位 + 4个方向全部0px + margin:auto 可以做到基于父容器水平垂居中*/ /*如果只需要垂直居中,那可以把left和right删掉,并且水平居中的方法也很多*/ } .content{ width: 100px; height: 200px; background: #0f8; position: absolute; /*position: absolute基于第一个不是position:static的父级元素定位*/ left: 50%; top: 50%; transform: translate(-50%,-50%); /*transform变化、使...变形、转换;transform属性应用于元素的2D或3D转换。这个属性允许你将元素移动,旋转,缩放,倾斜*/ /*translate平移,是transform的属性值的一部分*/ /*transition过渡、转变;可多个样式的变换效果*/ } </style> </head> <body> <p class="wrapper"> <span class="content"></span> </p> </body></html>
코드 보기
방법 2: 상위 요소 설정 표시: 테이블 셀 및 세로 -align
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0;margin: 0; } .wrapper{ height: 300px; line-height: 300px; width: 300px; margin:100px auto; background: #f90; text-align: center; } .wrapper img{ width: 150px; vertical-align: middle; } </style> </head> <body> <p class="wrapper"> <img src="images/1.jpg" alt="美女" title="美女"/> </p> </body></html>
CSS 수직 센터링 요약과 관련된 더 많은 글은 PHP 중국어 홈페이지를 주목해주세요!