상위 Div 내에서 Div를 수직 중앙에 배치하는 방법은 무엇입니까?

상위 Div 내에서 Div를 수직 중앙에 배치

다음에 의존하지 않고 다양한 방법을 통해 상위 div 내에서 div를 수직 중앙에 배치할 수 있습니다. 특정 요소 크기.

테이블 레이아웃(클래식 접근 방식)

이 방법은 테이블 레이아웃과 인라인 블록 표시 속성을 활용합니다.

<div class="container">
  <div class="inner">
    ...
  </div>
</div>

.container {
  display: table-cell;
  vertical-align: middle;
  height: 500px;
  width: 500px;
}

.inner {
  display: inline-block;
  width: 200px;
  height: 200px;
}

Transform(Modern Approach)

변환은 업종에 대한 더 간단한 솔루션을 제공합니다.

.container {
  position: relative;
  height: 500px;
  width: 500px;
}

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

Flexbox(선호되는 최신 접근 방식)

Flexbox는 중앙 집중화를 위한 가장 간단한 방법을 제공합니다. alignment.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
  width: 500px;
}

.inner {
  width: 200px;
  height: 200px;
}

참고:

• 테이블 레이아웃 접근 방식은 잘 지원되지만 성능에 영향을 미칠 수 있습니다.
• Transform 및 Flexbox 더 큰 지원과 사용 편의성을 갖춘 최신 솔루션을 제공합니다.
• 이러한 방법은 크기나 크기에 관계없이 수직 중심을 보장합니다. 내부 div의 내용.

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