DIV 내부에서 두 단락을 수직으로 가운데에 배치하는 방법은 무엇입니까?

DIV 내에서 두 요소를 세로로 가운데에 배치하는 방법

도전 과제: DIV 내에서 두 개의 단락 요소를 세로로 가운데에 배치하는 것은 다음과 같은 확립된 사항에도 불구하고 어려운 것으로 입증되었습니다. 튜토리얼.

해결책:

DIV 내에서 요소를 수직 중앙에 배치하는 두 가지 기본 접근 방식은 Flexbox와 CSS 테이블 및 위치 지정입니다.

Flexbox 방법

Flexbox를 활용하면 최소한의 비용으로 정밀한 정렬이 가능합니다. 코드:

#container {
  display: flex;              
  flex-direction: column;     
  justify-content: center;    
  align-items: center;        
  height: 300px;
  border: 1px solid black;
}

.box {
  width: 300px;
  margin: 5px;
  text-align: center;
}

Flexbox 방법의 장점:

• 최소 코드
• 단순화된 정렬
• 다양한 레이아웃 옵션
• 반응형 디자인

CSS 테이블 및 위치 지정 방법

CSS 테이블 및 위치 지정과 관련된 대체 방법:

body {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

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

.box {
  width: 300px;
  padding: 5px;
  margin: 7px auto;   
  text-align: center;
}

Flexbox와 CSS 테이블을 사용하는 경우 및 위치 지정:

Flexbox는 다음과 같은 이유로 권장되는 선택입니다. 특징:

• 뛰어난 효율성
• 포괄적인 레이아웃 기능
• 향상된 브라우저 지원

Flexbox를 사용하면 수직 중앙 정렬 및 기타 고급 정렬 작업을 손쉽게 수행할 수 있습니다. , 최신 웹 개발에서 선호되는 선택입니다.

위 내용은 DIV 내부에서 두 단락을 수직으로 가운데에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!