다른 div 안에 div를 중앙에 배치하는 방법은 무엇입니까?

소개

div의 중앙 정렬은 프런트엔드 개발에서 가장 중요한 측면 중 하나입니다. 이번 글에서는 HTML과 CSS를 사용하여 다른 div 안에 div를 배치하는 기술을 살펴보겠습니다.

이 튜토리얼에서는 하위 div가 있어야 하는 상위 div가 있습니다. 우리의 임무는 하위 div를 상위 div의 중앙에 배치하는 것입니다.

변환 번역 및 위치 구문 사용

이것은 한 div를 다른 div에 중앙 정렬하는 데 널리 사용되는 방법은 아닙니다

문법

으아악

위 구문은 다음을 수행합니다. -

• CSS 규칙 "left:50%;"는 요소의 수평 위치를 컨테이너 왼쪽의 50%로 설정합니다.

• "top:50%;" 규칙은 요소의 수직 위치를 컨테이너 상단에서 50%로 설정합니다.

• "변환: 이동(-50%, -50%);" 규칙은 요소를 가로로 -50%, 세로로 -50% 이동하여 요소의 중심을 컨테이너의 왼쪽과 위쪽에서 50% 효과적으로 배치합니다. .

그러나 이는 다른 div 내에서 div를 중앙에 배치하는 인기 있는 방법은 아닙니다. 그 이유는 다음과 같습니다 -

• 이 방법에는 다른 방법보다 5줄의 추가 코드가 필요합니다.

• 부모 div와 자식 div의 위치를 ​​정의해야 하는데, 이는 향후 다른 연관 div를 디자인할 때 불편을 초래할 수 있습니다.

예

으아악

지침

• 위의 예에서는 먼저 자식의 위치는 절대적이고 부모의 위치는 상대적임을 선언합니다. 다음으로, 상위 div의 상단과 왼쪽에서 하위 항목을 50% 이동합니다. 다음으로 CSS 변환 속성을 사용하여 하위 div를 중앙에 배치합니다.

• translate(x, y) 함수는 두 개의 값을 매개변수로 사용합니다. 여기서 x는 요소를 가로로 이동하는 픽셀 수이고 y는 요소를 세로로 이동하는 픽셀 수입니다. 이 예에서 요소는 너비의 -50%, 높이의 -50%를 이동하여 수직 및 수평 중앙에 배치됩니다.

그리드 속성 사용

div를 중앙 정렬하는 가장 일반적인 방법은 CSS의 그리드 속성을 사용하는 것입니다. 그러나 이를 위해서는 먼저 div를 그리드로 선언해야 합니다.

문법

으아악

place-items 속성은 그리드 컨테이너를 사용하여 항목을 가로 및 세로로 정렬합니다. 이 속성은 그리드 컨테이너에만 사용할 수 있습니다.

예

으아악

Flex Box 속성 사용

우리가 사용할 수 있는 또 다른 방법은 CSS의 flexbox 속성입니다. 먼저 부모를 가변상자로 선언해야 합니다. Flex Box는 CSS에서 널리 사용되는 요소입니다. 반응형 요소이고 프로그래머가 일반적으로 Flexbox 속성을 잘 제어할 수 있기 때문에 사용하기가 매우 편리합니다.

예

으아악

여러 중첩된 div를 중앙에 배치

상위 div 안에 중첩된 여러 div를 넣는 것도 간단한 작업입니다. 세 개의 div, 즉 상위 div인 컨테이너와 컨테이너의 하위 div인 first-child가 있다고 가정합니다. 두 번째 하위는 첫 번째 하위의 하위입니다. 그런 다음 먼저 논의한 방법을 사용하여 첫 번째 하위 요소를 컨테이너 div에 중앙 정렬할 수 있습니다. 다음으로, 첫 번째 자식을 두 번째 자식의 부모로 만들고 동일한 기술을 적용할 수 있습니다.

예를 들어 다음 방법 중 하나를 사용하여 기술을 시연하겠습니다. 독자는 유사한 작업을 수행하기 위해 다른 두 가지 방법을 시도해야 합니다.

예

으아악

결론

이 글에서는 HTML과 CSS를 사용하여 div를 다른 div 안에 가운데 정렬하는 방법을 배웠습니다. 우리는 div를 중앙 정렬하는 세 가지 기술을 살펴보았습니다. 그들은 위치 속성, 그리드 속성 및 flexbox 속성을 사용합니다. 그 중 flexbox 속성이 가장 널리 사용되고 가장 편리합니다.

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