CSS의 절대 위치 지정과 고정 위치 지정을 통해 HTML 요소를 중앙에 배치하는 방법은 무엇입니까?

많은 사람들이 CSS를 통해 모달 상자와 같은 요소를 페이지 중앙에 배치하려고 시도하지만 실패하고 JS를 사용합니다. 이 기술 문서에서는 JavaScript를 사용하지 않고 요소를 중앙에 배치하는 방법을 보여 드리겠습니다.

방법은 비교적 간단합니다. 즉, 하나의 래핑 요소만 사용하는 대신 두 개의 요소를 사용합니다. (추천 과정: css 비디오 튜토리얼)

HTML:

<div class="popup">
  <div class="wrapper">
       some content
    </div>
</div>

CSS:

.popup{
   position:fixed;
 left:50%;  
}

이 CSS는 요소의 왼쪽을 창 중앙에 배치하지만 모달 상자는 요소의 중간 위치.

이제 트릭 접근 방식을 살펴보겠습니다. 팝업용 래퍼가 두 개 있으므로 내부 div를 조작하고 div에 상대적으로 왼쪽으로 -50% 이동하라고 지시할 수 있습니다. 컨테이너 내부에 있으므로 div는 절반만 이동합니다. 크기가 왼쪽에 있습니다. 이것이 우리가 모달을 하나로 모으는 방법입니다.

CSS 추가

.popup .wrapper{
  position:relative; 
  left:-50%;
}

그런 다음 요소가 수평 중앙에 배치되어 요소의 중앙에 배치됩니다.

이 기사는 여기서 끝납니다. 더 흥미로운 콘텐츠를 보려면 PHP 중국어 웹사이트의 비디오 튜토리얼 칼럼을 주목하세요! ! !

위 내용은 CSS의 절대 위치 지정과 고정 위치 지정을 통해 HTML 요소를 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!