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

정의된 Div 크기 내에서 콘텐츠의 수직 정렬

지정된 너비와 높이의 div 내에서 콘텐츠를 수직으로 가운데에 맞추는 것은 다양한 방법을 통해 달성할 수 있습니다. . 몇 가지 인기 있는 옵션을 살펴보겠습니다.

1. 표시: 상위 Div의 Table-Cell

상위 div의 표시를 table-cell로 설정하고 하위 콘텐츠의 수직 정렬: 중간을 사용하면 수직 중앙 정렬이 가능합니다.

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

2. 표시: 블록 및 표시: Table-Cell

상위 div의 표시를 차단으로 설정하고 하위 콘텐츠의 표시를 table-cell로 설정하면 비슷한 결과를 얻을 수 있습니다.

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

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

3. 부동 상위 Div 및 표시: Table-Cell

상위 div를 부동화하고 하위 콘텐츠 표시를 table-cell로 설정하면 세로 가운데 맞춤이 발생합니다.

.parent-div {
  float: left;
  text-align: center;
}

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

4. 위치: 상대 및 위치: 절대

상위 div의 위치를 ​​상대 위치로 설정하고 하위 콘텐츠의 위치를 ​​절대 위치, 상단을 50%, 여백 상단을 -50%로 설정하면 수직 중앙 정렬이 가능합니다. 달성. 그러나 이 방법은 다양한 높이 시나리오에 대해 수동 조정이 필요합니다.

.parent-div {
  position: relative;
  height: 100px;
  width: 100px;
}

.child-content {
  position: absolute;
  top: 50%;
  margin-top: -50%;
  width: 100px;
}

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