CSS에서 수평 및 수직 센터링을 달성하는 4가지 방법

이 글에서는 주로 CSS 가로 및 세로 센터링을 구현하는 4가지 방법을 공유합니다. 계획에서는 너비와 높이도 지정했지만 너비와 높이가 고정되어 있다는 의미는 아닙니다. 하지만 너비와 높이를 주지 않으면 효과를 볼 수 없다고 생각했습니다. 이 솔루션이 너비와 높이를 고정하지 않는다는 사실은 이 솔루션을 사용한 후 상위 요소와 하위 요소의 너비와 높이가 변경되어도 가로 및 세로 중심 위치가 여전히 보장될 수 있음을 의미합니다.

다음 네 가지 솔루션은 모두 달성 가능합니다. 상위 요소 또는 하위 요소의 너비와 높이가 변경되면 가로 및 세로 중심 레이아웃이 계속 유지됩니다.

옵션 1: 위치 지정

html

         <p class="father">
            <p class="son"></p>
         </p>

css

        .father {
            position: relative;
            width: 200px;
            height: 200px;
            background: skyblue;
        }
        .son {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 100px;
            height: 100px;
            background: red;
        }

옵션 2: flex

html 변경되지 않음

        <p class="father">
            <p class="son"></p>
        </p>

css

        .father {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 200px;
            height: 200px;
            background: skyblue;
        }
        .son {
            width: 100px;
            height: 100px;
            background: red;
        }

옵션 3: 테이블 레이아웃

표시할 상위 요소를 설정해야 합니다:table- 셀, 수직 및 텍스트 정렬을 사용하여 모든 인라인 블록 수준 요소를 수평 및 수직으로 가운데에 배치합니다
하위 요소에 대한 표시 설정: inline-block

html 변경되지 않음

  <p class="father">
        <p class="son"></p>
    </p>

css

  .father {
            display: table-cell;
            width: 200px;
            height: 200px;
            background: skyblue;
            vertical-align: middle;
            text-align: center;
        }
        .son {
            display: inline-block;
            width: 100px;
            height: 100px;
            background: red;
        }

옵션 4: 그리드 레이아웃(최신 버전에서 지원됨) 브라우저)

html은 변경되지 않음

        <p class="father">
            <p class="son"></p>
        </p>

css는 변경되지 않음

        .father {
            display: grid;
            align-items:center;
            justify-content: center;
            width: 200px;
            height: 200px;
            background: skyblue;

        }
        .son {
            width: 10px;
            height: 10px;
            border: 1px solid red
        }

관련 권장 사항:

HTML 요소의 가로 및 세로 가운데 맞춤을 설정하는 방법

가로 및 세로 가운데 맞춤을 달성하는 방법에 대한 CSS 코드 공유 및 양쪽 끝 정렬

CSS를 사용하여 수평 및 수직 중앙 정렬을 달성하는 여러 방법 소개

위 내용은 CSS에서 수평 및 수직 센터링을 달성하는 4가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!