CSS에서 가변 너비의 가로 가운데 맞춤을 달성하는 방법

방법: 1. flex 레이아웃을 사용하고 ustify-content 및 align-items 속성을 모두 중앙으로 설정하여 중앙 정렬을 수행합니다. 2. 변환 및 위치 특성을 사용하여 중앙 정렬을 수행합니다. 3. table-cell을 사용하고 테이블의 셀을 사용합니다. 센터링 효과.

이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

추천: "css 비디오 튜토리얼"

css를 사용하여 가변 너비로 수평 중심 맞추기

방법 1: flex 사용

모든 사람의 첫 반응은 flex일 수 있습니다. 작성 방법이 충분히 간단하고 직관적이며, 호환성에도 문제가 없기 때문입니다. 휴대폰을 중심으로 한 첫 번째 선택입니다.

<div class="wrapper flex-center">
    <p>horizontal and vertical</p>
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
}
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

2가지 핵심 속성인 justify-content와 align-items를 사용하며, 둘 다 중앙 정렬을 위해 중앙으로 설정됩니다.

유일한 하위 요소가 중앙에 위치할 수 있도록 여기서 flex-center를 상위 요소에 걸어야 한다는 점에 유의해야 합니다.

방법 2: 이미지를 중앙에 배치하는 데 자주 사용되는 변형 + 위치

조합을 사용합니다.

<div class="wrapper">
    <img src="test.png">
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    position: relative;
}
.wrapper > img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

물론, 상위 요소 래퍼의 상대 위치를 하위 요소 img로 이동하여 절대 위치를 대체할 수도 있습니다. 효과는 동일합니다.

방법 3: 테이블 셀

테이블의 셀 센터링 효과를 사용하여 표시합니다. flex와 마찬가지로 상위 요소에 작성해야 합니다.

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

방법 4: 그리드

테이블과 마찬가지로 그리드 레이아웃을 사용하면 요소를 행이나 열별로 정렬할 수 있습니다. 그러나 레이아웃 측면에서 그리드는 테이블보다 더 가능하거나 간단합니다.

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    display: grid;
}
.wrapper > p {
    align-self: center;
    justify-self: center;
}

하지만 호환성 측면에서는 flex만큼 좋지 않습니다. 특히 IE10 이상만 지원하는 IE 브라우저에서는 더욱 그렇습니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !

위 내용은 CSS에서 가변 너비의 가로 가운데 맞춤을 달성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!