CSS에서 수평 및 수직 센터링의 일반적인 구현 방법은 무엇입니까? CSS의 세 가지 일반적인 수평 및 수직 센터링 방법

이 기사에서는 CSS에서 수평 및 수직 센터링을 달성하는 일반적인 방법을 소개합니다. CSS의 세 가지 일반적인 수평 및 수직 센터링 방법에는 특정 참조 값이 있습니다. 도움이 필요한 친구가 이를 참조할 수 있기를 바랍니다.

하위 요소의 너비와 높이를 모르는 경우 하위 요소의 가로 및 세로 중심을 맞추는 방법은 다음과 같습니다.

1 위치 지정 및 변환을 사용하여

HTML 및 CSS 코드는 다음과 같습니다:

<div class="super-div">
        <div class="sub-div">利用定位和transform
            <br/>实现水平垂直居中</div>
</div>
 
 .super-div {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
 
 .sub-div {
            background-color: green;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /* top left 分别相对于父元素的高度和宽度，translate相对于自身的宽度和高度 */
        }

이 구현의 핵심은 주석 부분에 있습니다. 상대 위치 지정 시 위쪽과 왼쪽은 상위 요소의 높이와 너비를 기준으로 계산되는 반면 변환은 자체 너비와 높이를 기준으로 계산됩니다. ; 효과는 다음과 같습니다.

2. 테이블 셀 레이아웃을 사용하여

HTML 및 CSS 코드를 구현하는 방법은 다음과 같습니다.

     <div class="super-div table">
        <div class="table-cell">利用table-cell
            <br/>实现水平垂直居中</div>
    </div> 
 
 
   .super-div {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
 
   .table {
            display: table;
        }
 
   .table-cell {
            display: table-cell;
            /*垂直居中*/
            vertical-align: middle;
            /*水平居中*/
            text-align: center;
            background-color: green;
        }

상위 요소는 테이블 레이아웃을 설정하고 하위 요소는 테이블 셀 레이아웃. 그런 다음 하위 요소의 수직 및 수평 중심 배치를 구현하면 효과는 다음과 같습니다.

3. 플렉스 레이아웃을 사용하여 다음과 같이

HTML 및 CSS 코드를 구현합니다.

<div class="super-div flex">
        <div class="flex-center">利用flex布局
            <br/>实现水平垂直居中</div>
</div> 
 
.super-div {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
 
 .flex {
            display: flex;
            /*flex布局*/
            justify-content: center;
            /*使子项目水平居中*/
            align-items: center;
            /*使子项目垂直居中*/
        }
 
 .flex-center {
            background-color: green;
        }

효과는 다음과 같습니다.

추천 관련 기사:

CSS에서 테이블을 사용하는 두 가지 방법(예제)

다중 열 레이아웃의 개념은 무엇인가요? CSS 다중 열 레이아웃 적용(예제 코드)

위 내용은 CSS에서 수평 및 수직 센터링의 일반적인 구현 방법은 무엇입니까? CSS의 세 가지 일반적인 수평 및 수직 센터링 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!