CSS 수직 센터링 요약
- 高洛峰원래의
- 2017-02-27 15:15:221204검색
서문: 저자가 공부한 후의 나름의 이해와 정리입니다. 혹시 오류나 궁금한 점이 있으면 정정해 주시면 계속 업데이트 하도록 하겠습니다!
수직 센터링은 다양한 곳에서 사용되고 솔루션도 다양합니다.
알려진 요소 너비 위치 위치 지정 + 음수 여백 방법을 사용할 수 있습니다.
절대 위치 지정 + 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 중국어 홈페이지를 주목해주세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.