CSS를 사용하여 완벽한 수직 및 수평 센터링을 달성하는 6가지 방법 소개

머리말

HTML 언어의 위치 지정 문제로 인해 웹 페이지에서 센터링을 수행하는 것은 단어만큼 간단하지 않습니다. 특히 콘텐츠 스타일이 변경되고 콘텐츠의 너비와 높이가 불확실한 경우 합리적인 센터링을 달성하는 것도 엔지니어의 경험을 테스트합니다. 인터넷을 중심으로 한 센터링에 대한 기사는 많지만 완전하지 않습니다. 따라서 Xiaoqie는 오늘 순수 CSS를 사용하여 센터링을 달성하기 위한 다양한 솔루션을 요약할 것입니다. 글에 부적절한 내용이 있으면 지적해주세요!

6가지 옵션

1. 절대 위치 지정+margin: auto

<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, 모두 크기가 상위 크기와 동일한 크기로 확장되는 것을 방지합니다.

2. 절대 위치 지정 + 여백 반전 오프셋

<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보다 약간 더 나쁩니다.

3. 절대 위치 지정 + 역방향 오프셋 변환

<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. 디스플레이：테이블

rreee

효과:

구현 원리: 옵션 4는 더 나은 구현 효과를 갖습니다. 중앙 블록의 크기를 래핑에 사용할 수 있습니다. 단점은 수직 센터링을 달성하기 위해 테이블 ​​셀 레이어가 추가된다는 것입니다. 옵션 4의 중앙 블록은 max-

로 설정할 수 있습니다. height, max-width 및 centered 블록은 수직 배치 속성을 가질 수 있습니다. 가로 방향이 table-cell 내부이므로 max-width가 그대로 표시됩니다. 즉, 너비가 커집니다.

5. 디스플레이: inline-block

rree

효과:

구현 원리: 원리: inline-block의 수직 정렬: 중간을 사용하여 뒤쪽 의사 요소를 정렬합니다. 뒤쪽 의사 요소의 높이는 상위 개체와 동일하므로 높이 방향으로 정렬됩니다. 옵션 5는 더 나은 결과를 얻습니다. 중앙 블록의 크기는 래핑 및 적응형 콘텐츠에 사용될 수 있으며 호환성도 상당히 좋습니다. 단점은 수평 센터링이 인라인 블록 간격(코드 줄 바꿈의 레거시)에서 공백을 고려해야 한다는 것입니다. Scheme 4의 중앙 블록은 최대 높이와 ​​최대 너비를 설정할 수 있으며 중앙 블록은 수평 및 수직 방향 모두에 적응할 수 있습니다.

6. 디스플레이: 플렉스박스

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!