이 글은 CSS를 활용한 다양한 센터링 레이아웃 방법을 요약한 것입니다. 관심 있는 친구들은
이 글은 센터링 상황이 가변적인 전체 너비와 가변적인 콘텐츠 너비로 설정된 상황을 설명합니다. (크기를 조정해도 여전히 중앙에 있음)
특별 참고 사항: 센터링 효과를 설정하기 위해 요소에 position:absolute;를 설정할 때 블로그에 소개된 CSS3 방법 외에도 음수 여백을 사용하여 중앙에 배치할 수도 있습니다. 하지만 너비와 높이가 알려진 상황에만 적합합니다(음수 오프셋은 요소 너비와 높이의 절반이기 때문입니다). 너비와 높이가 변경되면 더 이상 중앙 집중 효과가 없습니다.
이러한 레이아웃의 하위 요소는 속성 설정으로 인해 기본적으로 콘텐츠 너비로 설정됩니다.
이 문서의 모든 센터링 예제에서는 CSS 구현에 대해서만 설명합니다. html 코드는 다음과 같이 통합됩니다.
<p class="parent"> <p class="child">demo</p> </p>
1.
텍스트 정렬이 포함된 1.1 인라인 블록
.parent{ text-align: center; } .child{ display: inline-block; }
장점:호환성이 매우 좋습니다. IE6 및 7과 호환되려면 하위 요소의 CSS에 *display:inline 및 *zoom:1만 추가하면 됩니다. 단점: 내부 텍스트도 가로로 표시됩니다. 중앙에 있으므로 영향을 제거해야 합니다.
여백이 있는 1.2 테이블
.child{ display:table; margin: 0 auto; }
장점: 설정이 매우 간단합니다. 하위 요소를 설정해야 하고 IE8+를 지원해야 하며 IE6, 7을 지원해야 하며 하위 요소를 테이블 구조로 바꿀 수 있습니다.
1.3절대 변환
.parent{ position:relative; } .child{ position:absolute; left:50%; transform: translateX(-50%); }
장점: 중앙에 있는 요소는 다른 요소에 영향을 주지 않습니다. 요소. 단점: CSS3의 새로운 속성은 IE9+를 지원하지만, 낮은 버전의 브라우저에서는 이를 지원하지 않습니다.
2. 수직 중앙 정렬
2.1 수직 정렬이 포함된 테이블 셀
.parent{ display: table-cell; vertical-align:middle; }
장점: 설정이 쉽고, IE8+와 호환되는 상위 요소만 설정하면 됩니다. 로컬 브라우저와 호환되어야 하는 경우 대체할 수 있습니다. p는 테이블 구조를 가지고 있습니다.
2.2 절대(변환 포함)
.parent{ position:relative; } .child{ position:absolute; top: 50%; transform: translateY(-50%); }
장점: 중앙에 있는 요소는 다른 요소에 영향을 주지 않습니다. 요소. 단점: CSS3의 새로운 속성은 IE9+를 지원하지만, 낮은 버전의 브라우저에서는 이를 지원하지 않습니다.
3. 가로 + 세로 센터링3.1 텍스트 정렬이 포함된 인라인 블록과 세로 정렬이 포함된 테이블 셀
.parent{ display: table-cell; vertical-align:middle; text-align:center; } .child{ display: inline-block; }
장점: 처음 두 가지 방법을 조합하면 호환성이 좋아요! IE8+를 지원하며, 하위 버전의 브라우저와도 호환됩니다. 단점: 설정이 더 복잡합니다.
3.2 절대(변환 포함)
.parent{ position: relative; } .child{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
장점: 중앙에 있는 요소는 다른 요소에 영향을 주지 않습니다. 요소. 단점: CSS3의 새로운 속성은 IE9+를 지원하지만, 낮은 버전의 브라우저에서는 이를 지원하지 않습니다.
4. 올인원 플렉스
css3에는 레이아웃이 간단하고 강력하지만 성능이 약간 떨어집니다. 주로 모바일 단말기에서 사용됩니다.4.1 가로 센터링안녕
4.2 세로 센터링
/*当父元素设置display: flex;时,子元素为flex-item,默认为内容宽度。*/ .parent{ display: flex; justify-content: center; } /* 在设置子元素为margin: 0 auto;时,可删除父元素的justify-content: center;同样可以达到居中效果*/ /* .child{ margin: 0 auto; }*/
4.3 가로 및 세로 센터링
.parent{ display: flex; align-items: center; }위 내용은 이 내용의 전체 내용입니다. 기사가 여러분에게 도움이 되기를 바랍니다.
위 내용은 CSS를 활용한 다양한 중앙 레이아웃 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!