CSS를 활용한 다양한 중앙 레이아웃 방법 요약

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