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