동적 치수로 '위치:고정' 요소를 중앙에 배치하는 방법은 무엇입니까?

동적 크기를 사용하여 Positioned:fixed 요소 중앙에 배치

position:fixed를 사용하여 화면 중앙에 정렬되는 팝업 상자를 만드는 경우 , 수평 및 수직 모두 중심을 맞추는 것이 어려울 수 있습니다. 이는 margin:5% auto; 때문입니다. 요소를 수평으로만 정렬합니다.

원하는 정렬을 달성하려면 다음 전략을 사용할 수 있습니다.

방법 1: 알려진 너비 및 높이

div의 너비와 높이를 알고 있는 경우 상단 및 왼쪽 속성을 50%로 설정할 수 있습니다. 또한 중앙을 가운데로 이동하려면 margin-top 및 margin-left를 div 각 크기의 음수 절반으로 설정해야 합니다.

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -250px;

방법 2: 동적 너비 및 높이

div의 크기가 동적인 경우 여백 대신 변형 속성을 사용할 수 있습니다. 변환은 div의 상대적 너비와 높이의 음의 절반으로 설정됩니다.

position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

방법 3: 고정 너비 및 불확정 수직 정렬

div의 너비가 고정되어 있고 수직 정렬이 중요하지 않습니다. left:0 및 right:0을 margin-left 및 margin-right와 함께 요소에 추가할 수 있습니다. auto.

position: fixed;
width: 500px;
margin: 5% auto; /* Only centers horizontally not vertically! */
left: 0;
right: 0;

이 메소드를 구현하면 위치:고정 요소를 동적 크기로 화면 중앙에 배치하여 뷰포트 크기에 관계없이 고정된 상태를 유지할 수 있습니다.

위 내용은 동적 치수로 '위치:고정' 요소를 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!