> 웹 프론트엔드 > CSS 튜토리얼 > 동적 치수로 '위치:고정' 요소를 중앙에 배치하는 방법은 무엇입니까?

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

Patricia Arquette
풀어 주다: 2024-12-18 05:58:11
원래의
615명이 탐색했습니다.

How to Center a `position:fixed` Element with Dynamic Dimensions?

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

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

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

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

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

1

2

3

4

5

6

7

position: fixed;

width: 500px;

height: 200px;

top: 50%;

left: 50%;

margin-top: -100px;

margin-left: -250px;

로그인 후 복사

방법 2: 동적 너비 및 높이

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

1

2

3

4

position: fixed;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

로그인 후 복사

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

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

1

2

3

4

5

position: fixed;

width: 500px;

margin: 5% auto; /* Only centers horizontally not vertically! */

left: 0;

right: 0;

로그인 후 복사

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

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿