CSS로 div를 중앙에 배치하는 방법

CSS로 Div를 중앙에 배치하는 방법

웹 디자인에서는 페이지를 보기 좋게 만드는 것이 매우 중요합니다. Div를 중앙에 배치하는 것은 웹 페이지를 디자인할 때 일반적인 요구 사항입니다. 오늘은 CSS를 사용하여 Div를 중앙에 배치하는 방법을 소개하겠습니다.

방법 1: 위치 및 변환 속성을 사용하세요

위치 속성은 요소의 위치 지정 방법을 지정하는 데 사용되며 변환 속성은 요소를 변환하는 데 사용됩니다.

먼저 중앙에 맞춰야 하는 Div에 대해 CSS에서 고정 너비와 높이를 설정한 다음 위치 속성을 절대값으로 설정하고 왼쪽 및 위쪽 속성을 모두 50%로 설정한 다음 변형 속성을 사용하여 왼쪽 위의 Div 정사각형 번역, 번역 거리는 자체 너비와 높이의 절반입니다.

.center-div {
  position: absolute;
  width: 300px;
  height: 150px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

이 Div를 상위 컨테이너에서 가로 및 세로 중앙에 배치할 수 있습니다.

방법 2: Flex 레이아웃 사용

Flex 레이아웃은 CSS3에 도입된 새로운 레이아웃 방법으로, 요소를 가로 및 세로 중앙에 배치하는 데 사용할 수 있습니다.

먼저 상위 컨테이너의 표시 속성을 flex로 설정한 다음 justify-content 속성을 중앙으로 설정하면 콘텐츠가 수평으로 중앙에 배치됩니다. 그런 다음 align-items 속성을 중앙으로 설정하면 콘텐츠가 수직으로 중앙에 배치됩니다. 중심.

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.parent .center-div {
  width: 300px;
  height: 150px;
}

방법 3: 텍스트 정렬 및 수직 정렬 속성 사용

내부에 텍스트 한 줄만 있는 상황에 적용 가능합니다.

Div를 중앙에 배치하려면 상위 컨테이너의 text-align 속성을 사용하여 내부 텍스트를 수평으로 중앙에 배치하고 수직 정렬 속성을 사용하여 텍스트를 수직으로 중앙에 배치할 수 있습니다.

.parent {
  text-align: center;
  line-height: 150px;
}

.parent .center-div {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  height: 150px;
}

요약:

요소 중심 정렬을 달성하는 위의 세 가지 방법은 먼저 상위 컨테이너에 일부 속성을 설정한 다음 하위 요소에 몇 가지 제한 사항을 적용하는 것입니다. CSS는 매우 유연하므로 웹 디자인에서 자유롭게 플레이하려면 CSS의 다양한 용도를 숙지해야 합니다.

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