CSS3 속성은 어떻게 수평 센터링과 수직 센터링을 달성합니까?

CSS3 속성으로 수평 센터링과 수직 센터링을 달성하는 방법은 무엇입니까?

웹 디자인의 발전과 함께 요소의 수평, 수직 중심을 맞추는 것이 점점 더 중요해졌습니다. CSS3에서는 일부 속성과 기술을 사용하여 이러한 레이아웃 효과를 쉽게 얻을 수 있습니다. 이 문서에서는 수평 및 수직 중앙 정렬 효과를 얻는 데 도움이 되는 몇 가지 일반적으로 사용되는 CSS3 속성과 코드 예제를 소개합니다.

1. 가로 가운데 맞춤

1. 가로 가운데 맞춤을 위해 text-align 속성을 사용하세요.
하위 요소의 가로 가운데 맞춤을 위해 상위 요소에서 text-align 속성을 사용하세요.
코드 예:

.parent {
  text-align: center;
}

.child {
  display: inline-block;
}

display:inline-block을 사용하는 하위 요소는 상위 요소 내에서 수평 중앙에 배치됩니다.

2. 수평 중앙 정렬에 여백 속성 사용
하위 요소에 대해 margin-left:auto 및 margin-right:auto를 설정하여 수평 중앙 정렬을 달성합니다.
코드 예:

.parent {
  text-align: center;
}

.child {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

display:block을 사용하는 하위 요소는 상위 요소 내에서 수평 중앙에 배치됩니다.

3. 수평 센터링을 위해 Flexbox를 사용하세요.
Flexbox 레이아웃을 사용하면 수평 센터링을 더 유연하게 달성할 수 있습니다.
코드 예:

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

.child {
  /* 子元素样式 */
}

상위 요소의 display:flex 및 justify-content:center 속성을 설정하여 하위 요소의 수평 중앙 정렬을 달성할 수 있습니다.

2. 수직 센터링

1. 수직 센터링을 위해 line-height 속성을 사용하세요
부모 요소의 line-height 속성을 상위 요소의 높이 값과 동일하게 설정하면 한 줄의 수직 센터링을 구현할 수 있습니다. 텍스트.
코드 예:

.parent {
  height: 100px;
  line-height: 100px;
}

.child {
  /* 子元素样式 */
}

line-height 속성을 상위 요소의 높이 값과 동일하게 설정하면 하위 요소의 콘텐츠가 상위 요소의 수직 중앙에 배치됩니다.

2. 수직 중앙 정렬을 위해 table 속성을 사용합니다.
상위 요소를 display:table로 설정하고 하위 요소를 display:table-cell로 설정한 다음 수직 정렬:middle을 사용하여 수직 중앙 정렬을 수행합니다.
코드 예:

.parent {
  display: table;
}

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

display:table 및 display:table-cell을 사용하여 상위 요소 내에서 하위 요소를 세로 중앙에 배치합니다.

3. 수직 센터링을 위해 변환 속성을 사용하세요.
상위 요소를 위치:상대적으로, 하위 요소를 위치:절대로 설정하고, 상단:50% 및 변환:변환Y(-50%)를 사용하여 수직 센터링을 달성하세요.
코드 예:

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

translate:translateY(-50%)를 사용하여 하위 요소를 상위 요소 내 수직 중앙에 배치합니다.

요약하자면, 일부 CSS3 속성과 기술을 사용하면 요소의 수평 중앙 정렬과 수직 중앙 정렬을 쉽게 달성할 수 있습니다. 실제 필요에 따라 레이아웃 효과를 얻기 위한 적절한 방법을 선택하십시오. 이 기사가 도움이 되기를 바랍니다.

위 내용은 CSS3 속성은 어떻게 수평 센터링과 수직 센터링을 달성합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!