일반적인 flex, Transform, Absolute 등이 있습니다. CSS3 그리드 레이아웃도 있습니다. 의사 요소 메서드도 있습니다. 예, 읽으셨습니다. ::after 및 ::before도 센터링을 달성할 수 있습니다.
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.flex + margin
이것은 flex 방식의 변형입니다. 상위 요소는 flex로 설정되고 하위 요소는 margin:auto;로 설정됩니다. 하위 요소는 주변 여백에 의해 가운데로 "압착"된다는 것을 이해할 수 있습니다.
<div class="wrapper"> <p>horizontal and vertical</p> </div>
.wrapper { width: 300px; height: 300px; border: 1px solid #ccc; display: flex; } .wrapper > p { margin: auto; }
3. 변형 + 절대
이 조합은 이미지를 중앙에 배치하는 데 자주 사용됩니다.
<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로 이동하여 절대 위치를 대체할 수도 있습니다. 효과는 동일합니다.
4. table-cell
테이블의 셀 센터링 효과를 활용하여 표시하세요. 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; }
5. Absolute + 네 방향의 값이 동일합니다
절대 위치 레이아웃을 사용하고 margin:auto;를 설정하고 위쪽, 왼쪽, 오른쪽, 아래쪽 값을 동일하게 설정합니다. (반드시 모두 0일 필요는 없습니다).
<div class="wrapper"> <p>horizontal and vertical</p> </div>
.wrapper { width: 300px; height: 300px; border: 1px solid #ccc; position: relative; } .wrapper > p { width: 170px; height: 20px; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
이 방법은 일반적으로 팝업 레이어에 사용되며, 팝업 레이어의 너비와 높이를 설정해야 합니다.
6. 쓰기 모드
이 방법은 텍스트 표시 방향을 세로 방향으로 변경하는 등 텍스트 표시 방향을 변경할 수 있습니다.
<div class="wrapper"> <div class="wrapper-inner"> <p>horizontal and vertical</p> </div> </div>
.wrapper { width: 300px; height: 300px; border: 1px solid #ccc; writing-mode: vertical-lr; text-align: center; } .wrapper > .wrapper-inner { writing-mode: horizontal-tb; display: inline-block; text-align: center; width: 100%; } .wrapper > .wrapper-inner > p { display: inline-block; margin: auto; text-align: left; }
아직 호환성에 사소한 결함이 있지만 휴대폰을 포함한 대부분의 브라우저는 이미 쓰기 모드 쓰기를 지원하고 있습니다.
7. 그리드
테이블과 마찬가지로 그리드 레이아웃을 사용하면 요소를 행이나 열별로 정렬할 수 있습니다. 그러나 레이아웃 측면에서 그리드는 테이블보다 더 가능하거나 간단합니다.
<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 브라우저에서는 더욱 그렇습니다.
8. ::after
의사 요소를 사용하여 센터링을 구현할 수도 있나요? 정말 마법 같은 느낌이 듭니다. 아래 예를 보세요.
<div class="wrapper"> <img src="test.png"> </div>
.wrapper { width: 300px; height: 300px; border: 1px solid #ccc; text-align: center; } .wrapper::after { content: ''; display: inline-block; vertical-align: middle; height: 100%; } .wrapper > img { vertical-align: middle; }
가로 방향은 이해하기 쉽습니다. 세로 방향에서는 img를 가운데로 끌어내린 후 ::로 이해하면 됩니다.
9. ::before
다른 하나는 글꼴 크기: 0;과 함께 작동하는 마법입니다.
<div class="wrapper"> <img src="test.png"> </div>
.wrapper { width: 300px; height: 300px; border: 1px solid #ccc; text-align: center; font-size: 0; } .wrapper::before { display: inline-block; vertical-align: middle; font-size: 14px; content: ''; height: 100%; } .wrapper > img { vertical-align: middle; font-size: 14px; }
font-size: 0;의 비밀은 라벨 사이의 간격을 없애는 것입니다. 또한 의사 요소는 가장 기본적인 CSS 작성 방법과 일치하므로 호환성에 대한 위험이 없습니다.
추천 튜토리얼: "CSS 튜토리얼"
위 내용은 가변 너비와 높이로 수직 및 수평 센터링을 달성하는 CSS 9가지 방법(건조 정보)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!