알려진 높이와 알려지지 않은 높이에서 수직 및 수평 센터링 방법

다음 문서에서는 하위 상자를 상위 상자 내에서 수직 및 수평 중앙에 유지하기 위한 다양한 솔루션(알려진 하위 요소 높이와 알 수 없는 하위 요소 높이)을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

(추천 튜토리얼: CSS 비디오 튜토리얼)

1. 해결 방법 1 (하위 요소의 너비와 높이가 알려져 있음)

1. 상위 요소의 상대 위치 지정

2 하위 요소의 왼쪽, 오른쪽, 위쪽 및 아래쪽 속성을 0으로 설정하고 여백을 자동으로 설정합니다

또는 (2단계와 3단계 중 하나를 선택하세요)

3. 하위 요소 left를 50%, top을 50%로 설정하고 margin-left는 하위 요소의 너비/2px로 설정되고 margin-top은 하위 요소의 높이/2px로 설정됩니다

2. 솔루션 2(하위 요소의 너비와 높이를 알 수 없음)

1. 하위 요소의 절대 위치 지정을 활성화하면 상위 요소가 상대 위치 지정을 켭니다(이 단계는 옵션 1과 동일).

2. 하위 요소를 왼쪽으로 50%, 위쪽을 50%로 설정하고 변환(-50%,-50%)으로 설정합니다.

특별 참고 사항: 하위 요소에 절대 위치 지정이 켜져 있으면 상위 요소가 또한 요소는 비정적 위치 지정(필요에 따라 상대 위치 지정 또는 절대 위치 지정)을 켜야 하위 요소의 절대 위치가 상위 요소 위치를 기준으로 지정됩니다.

끝, 각 솔루션의 구현 원리가 다르므로 변증법적으로 살펴보시기 바랍니다.

더 많은 프로그래밍 관련 지식을 보려면

프로그래밍 비디오를 방문하세요! !

위 내용은 알려진 높이와 알려지지 않은 높이에서 수직 및 수평 센터링 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!