CSS 절대 위치를 중앙에 배치하는 방법은 무엇입니까? CSS 절대 위치 지정 및 센터링의 네 가지 구현 방법

센터링은 웹 페이지에 CSS를 배치할 때 자주 사용됩니다. 그중 CSS 절대 위치 지정은 어떻게 CSS 절대 위치 지정을 달성할 수 있을까요? 오늘 글에서는 CSS에서 절대 위치 지정과 중심 지정을 구현하는 방법을 소개하겠습니다.

추천 매뉴얼: CSS 온라인 매뉴얼

CSS 절대 위치 지정 및 센터링을 구현하는 방법에는 여러 가지가 있습니다. 아래에서는 CSS 절대 위치 지정 및 센터링의 네 가지 방법을 소개합니다.

1. 호환성이 좋은 주류 CSS 절대 위치 지정 및 중심 지정 사용:

.conter{
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    margin-top: -200px;    /* 高度的一半 */
    margin-left: -300px;    /* 宽度的一半 */
}

참고: 이 방법에는 요소의 크기를 미리 알아야 한다는 명백한 단점이 있습니다. 그렇지 않으면 음수 마진 값의 조정이 정확할 수 없습니다. 이때 JS의 도움을 받아 얻어야 하는 경우가 많다.

2. CSS3의 출현으로 여백 대신 변환을 사용하는 더 나은 솔루션이 탄생했습니다. 변환에서 변환 오프셋의 백분율 값은 자체 크기에 상대적입니다. 이와 같이 CSS 절대 위치 지정 및 중심 지정을 달성할 수 있습니다. :

.conter{
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */
}

3 , margin:auto는 절대 위치 지정 요소의 중심 지정을 실현합니다(위, 아래, 왼쪽 및 오른쪽에 대한 위치 지정 0, 여백: 자동)

.conter{
    width: 600px; height: 400px;
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    margin: auto;    /* 有了这个就自动居中了 */
}

4 CSS3 상자 모델 사용: flex 레이아웃을 사용하여 CSS 절대 위치 지정을 구현합니다. 그리고 센터링. 이 상황은 하위 버전의 브라우저와 관계없이 사용할 수 있습니다.

추천 관련 기사:
1.CSS에서 절대 위치 지정을 수행하는 방법
2.CSS에서 상대 위치 지정과 절대 위치 지정의 사용법과 차이점을 설명하는 예(그림 및 텍스트)
3.Css 절대 포지셔닝 센터링 기술이 우수합니다 단점 차트에 대한 자세한 설명
관련 영상 추천 :
1.CSS 영상 튜토리얼 - 옥소녀심경편

포지셔닝에 대한 자세한 내용은 여기를 참고하세요. css 매뉴얼.

위 내용은 CSS 절대 위치를 중앙에 배치하는 방법은 무엇입니까? CSS 절대 위치 지정 및 센터링의 네 가지 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!