CSS를 중앙에 배치하는 방법

프런트 엔드 개발에서는 중앙 레이아웃이 일반적인 요구 사항이며, 특히 모바일 개발에서는 스타일과 시각적 아름다움을 정렬하기 위해 요소를 중앙에 배치해야 합니다. 다음은 몇 가지 일반적인 CSS 센터링 방법입니다.

1. 가로 중심 레이아웃

1. margin: 0 auto

가장 일반적으로 사용되는 가로 가운데 맞춤 방법입니다. 요소의 왼쪽 및 오른쪽 여백을 자동으로 설정하면 됩니다. 이 방법은 블록 요소에 대해 작동하지만 요소가 절대 위치에 있거나 부동 상태인 경우에는 작동하지 않습니다.

.box {
  width: 200px;
  margin: 0 auto;
}

2. text-align: center

수평으로 중앙에 배치해야 하는 요소가 인라인 요소인 경우 text-align: center 속성을 사용하여 상위 컨테이너의 텍스트를 중앙에 배치할 수 있습니다.

.parent {
  text-align: center;
}
.child {
  display: inline-block;
}

3. Flexible Box Layout

Flex 레이아웃은 다양한 센터링 효과를 쉽게 얻을 수 있는 강력한 CSS 레이아웃 방법입니다. Flexbox를 사용하면 하위 요소를 상위 컨테이너 중앙에 배치할 수 있습니다.

.parent {
  display: flex;
  justify-content: center;
}
.child {
  width: 50px;
}

2. 수직 센터링 레이아웃

1. line-height

이것은 가장 간단한 수직 센터링 방법으로, 요소의 라인 높이를 높이와 동일하게 설정하면 됩니다.

.box {
  height: 80px;
  line-height: 80px;
}

2. table-cell

display: table 및 table-cell 속성을 사용하면 요소의 수직 중심 효과를 쉽게 얻을 수 있습니다.

.parent {
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

3. Flexible Box Layout

수평 센터링과 마찬가지로 Flexbox를 사용하여 요소의 수직 센터링도 달성할 수 있습니다.

.parent {
  display: flex;
  align-items: center;
}
.child {
  height: 50px;
}

3. 가로 및 세로 중심 배치

1. 절대 위치 지정 및 음수 여백

절대 위치 지정 및 음수 여백을 사용하면 요소의 가로 및 세로 중심을 쉽게 얻을 수 있습니다.

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25px; /* height/2 */
  margin-left: -25px; /* width/2 */
  height: 50px;
  width: 50px;
}

2. Transform

Transform을 사용하여 요소의 수평 및 수직 중심을 달성할 수도 있습니다. 요소의 번역X 및 번역Y 속성을 -50%로 설정하기만 하면 됩니다.

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 50px;
  width: 50px;
}

3. Flexbox

Flexbox는 요소의 수평 및 수직 중앙 정렬에도 가장 적합한 선택입니다. 요소의 상위 컨테이너를 display: flex로 설정한 다음 justify-content 및 align-items 속성을 사용하여 중앙 레이아웃을 구현합니다.

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
.child {
  height: 50px;
  width: 50px;
}

위는 일반적인 CSS 센터링 방법입니다. 실제 개발에서는 요소의 유형, 구조, 요구 사항 및 기타 요소를 기반으로 가장 적합한 센터링 방법을 선택해야 합니다.

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