CSS에서 요소를 수직 중앙에 배치하려면 어떻게 해야 합니까?

CSS 기술을 사용하여 요소를 수직으로 가운데에 배치>

다양한 CSS 방법을 사용하여 div 내에서 요소를 수직으로 가운데에 배치할 수 있습니다. 다음은 두 가지 일반적인 접근 방식입니다.

Flexbox 방법

Flexbox는 유연한 항목 정렬이 가능한 다목적 레이아웃 시스템을 제공합니다. Flexbox를 사용하여 요소를 세로 중앙에 배치하려면 다음 단계를 따르세요.

1. display: flex를 사용하여 상위 컨테이너가 플렉스 디스플레이를 갖도록 설정합니다.
2. 요소를 쌓을 열의 플렉스 방향을 지정합니다.
3. justify-content: center를 사용하여 항목을 수직으로 정렬합니다.

의 경우 예를 들어 Flexbox를 사용하는 CSS 코드는 다음과 같습니다.

#container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

테이블 및 위치 지정 방법

이 방법은 테이블 표시 및 위치 지정을 활용합니다.

1. 본체를 디스플레이로 설정 : 테이블처럼 테이블로 설정 구조.
2. 컨텐츠를 수직으로 정렬하려면 상위 컨테이너를 표시: table-cell 및 수직 정렬: 중간으로 설정합니다.
3. 여백: 0 자동을 사용하여 요소를 중앙에 배치합니다.

이 메소드에 대한 CSS 코드는 다음과 같습니다.

body {
  display: table;
}

#container {
  display: table-cell;
  vertical-align: middle;
}

.box {
  margin: 0 auto;
}

어떤 메소드를 선택하시겠습니까?

Flexbox는 단순성, 효율성 및 광범위한 레이아웃 옵션으로 인해 일반적으로 선호됩니다. 그러나 이전 브라우저에 대한 지원이 우려되는 경우 테이블 및 위치 지정 방법을 채택할 수 있습니다.

위 내용은 CSS에서 요소를 수직 중앙에 배치하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!