고정 위치 요소를 수평 및 수직 중앙에 배치하는 방법은 무엇입니까?

위치를 중앙에 맞추는 방법:고정 요소

문제:

"위치: 고정;"을 중앙에 맞추는 방법 여백 사용에도 불구하고 동적 너비와 높이를 사용하여 가로 및 세로로 팝업 상자: 5% 자동;

해결책:

이를 달성하기 위한 몇 가지 접근 방식이 있습니다.

접근 방법 1: 고정 너비 및 높이

1. div의 왼쪽 상단 중앙에 위치하도록 상단 및 왼쪽을 50%로 설정합니다.
2. margin-top 및 margin-left를 음수 절반으로 설정합니다. div의 높이와 너비를 사용하여 중심을 가운데로 이동합니다.

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height */
margin-left: -250px; /* Negative half of width */

접근 방식 2: 동적 너비 및/또는 높이

1. 여백 대신 변환을 사용하여 div의 상대적 너비 및 높이의 음수 절반으로 설정합니다.

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

접근 방식 3: 너비는 고정하지만 세로는 신경 쓰지 않음 가운데 맞추기

1. 요소에 왼쪽: 0 및 오른쪽: 0을 추가하고 margin-left 및 margin-right를 자동으로 설정합니다.

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

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