머리말
HTML 언어의 위치 지정 문제로 인해 웹 페이지에서 센터링을 수행하는 것은 단어만큼 간단하지 않습니다. 특히 콘텐츠 스타일이 변경되고 콘텐츠의 너비와 높이가 불확실한 경우 합리적인 센터링을 달성하는 것도 엔지니어의 경험을 테스트합니다. 인터넷을 중심으로 한 센터링에 대한 기사는 많지만 완전하지 않습니다. 따라서 Xiaoqie는 오늘 순수 CSS를 사용하여 센터링을 달성하기 위한 다양한 솔루션을 요약할 것입니다. 글에 부적절한 내용이 있으면 지적해주세요!
<style type="text/css">
.wrp {
background-color: #b9b9b9;
width: 240px;
height: 160px;
}
.box {
color: white;
background-color: #3e8e41;
width: 200px;
height: 120px;
overflow: auto;
}
.wrp1 { position: relative; }
.box1 {
margin: auto;
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
}
</style>
<div class="wrp wrp1">
<div class="box box1">
<h3>完全居中层1：</h3>
<h3>开发工具 【 WeX5 】： 高性能轻架构、开源免费、跨端、可视化</h3>
</div>
</div>효과:
구현 원칙: css 위치 지정 규칙을 사용하고 왼쪽 및 오른쪽, 위쪽 및 아래쪽 위치를 0으로 설정하고 여백을 자동으로 설정하고 CSS에서 위치 지정을 기반으로 여백 값을 계산하도록 한 다음 해킹을 사용합니다. 센터링을 달성하기 위해. 중앙 블록의 자(녹색)
CSS도 여백을 계산할 때 크기 값을 참조해야 하므로 크기를 제어할 수 있어야 하며, 자동으로 계산된 크기는 상위 컨테이너와 동일합니다. 너비, 높이 또는 최대 설정 여부-
height, max-width, 모두 크기가 상위 크기와 동일한 크기로 확장되는 것을 방지합니다.
<style type="text/css">
.wrp2 { position: relative; }
.box2 {
position: absolute;
top: 50%; left: 50%;
margin-left: -100px; /* (width + padding)/2 */
margin-top: -75px; /* (height + padding)/2 */
}
</style>
<div class="wrp wrp2">
<div class="box box2">
<h3>完全居中方案二：</h3>
<h3>开发工具 【 WeX5 】： 高性能轻架构、开源免费、跨端、可视化</h3>
</div>
</div>효과:
구현 원칙: 상단과 왼쪽은 상위 객체 의 높이와 너비의 50%만큼 오프셋되므로 중앙 블록의 너비와 높이의 50%를 반대로 오프셋하려면 여백을 사용해야 합니다. 백분율은
에 사용되므로 백분율을 여백에 사용할 수 없습니다. 상위 개체이므로 수동으로 고정 값을 계산하고 여백 값을 지정해야 합니다. 이 솔루션은 마진 역방향 바이어스 값을 계산하기 위해 고정된 크기 값이 필요하므로 솔루션 2는 솔루션 1보다 약간 더 나쁩니다.
<style type="text/css">
.wrp3 { position: relative; }
.box3 {
margin: auto;
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
<div class="wrp wrp3">
<div class="box box3">
<h3>完全居中方案三：</h3>
<h3>开发工具 【 WeX5 】： 高性能轻架构、开源免费、跨端、可视化</h3>
</div>효과:
구현 원리: Scheme 3은 Scheme 2와 동일한 원리를 가지고 있습니다! 차이점은 역 오프셋에 마진 대신 변환을 사용한다는 점입니다. 변환의 계산 기준은 요소 자체이므로 여기서는 역 오프셋에 50%를 사용할 수 있습니다. 이 솔루션에는 브라우저가 위치를 계산하는 기준이 되는 고정 크기 값도 필요합니다.
효과:
구현 원리: 옵션 4는 더 나은 구현 효과를 갖습니다. 중앙 블록의 크기를 래핑에 사용할 수 있습니다. 단점은 수직 센터링을 달성하기 위해 테이블 셀 레이어가 추가된다는 것입니다. 옵션 4의 중앙 블록은 max-
로 설정할 수 있습니다. height, max-width 및 centered 블록은 수직 배치 속성을 가질 수 있습니다. 가로 방향이 table-cell 내부이므로 max-width가 그대로 표시됩니다. 즉, 너비가 커집니다.
효과:
구현 원리: 원리: inline-block의 수직 정렬: 중간을 사용하여 뒤쪽 의사 요소를 정렬합니다. 뒤쪽 의사 요소의 높이는 상위 개체와 동일하므로 높이 방향으로 정렬됩니다. 옵션 5는 더 나은 결과를 얻습니다. 중앙 블록의 크기는 래핑 및 적응형 콘텐츠에 사용될 수 있으며 호환성도 상당히 좋습니다. 단점은 수평 센터링이 인라인 블록 간격(코드 줄 바꿈의 레거시)에서 공백을 고려해야 한다는 것입니다. Scheme 4의 중앙 블록은 최대 높이와 최대 너비를 설정할 수 있으며 중앙 블록은 수평 및 수직 방향 모두에 적응할 수 있습니다.
<style type="text/css">
.wrp4 { display: table; }
.subwrp4 {
display: table-cell;
vertical-align: middle;
}
.box4 {
margin: auto;
overflow-wrap: break-word;
height: auto;
max-height: 80%;
max-width: 80%;
}
</style>
<div class="wrp wrp4">
<div class="subwrp4">
<div class="box box4">
<h3>完全居中方案四：</h3>
</div>
</div>
</div>효과:
구현 원칙: Flexbox 레이아웃. 이것은 다양한 레이아웃 및 위치 지정 문제를 해결하기 위해 특별히 고안된 최고의 레이아웃 방법입니다! 장점: 다양한 배열 및 레이아웃 문제를 해결할 수 있으며 구현 방법이 인간의 인지와 일치합니다. 단점: PC의 일부 오래된 브라우저는 높은 지원을 제공하지 않습니다.
위 내용은 CSS를 사용하여 완벽한 수직 및 수평 센터링을 달성하는 6가지 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
