정의된 크기로 Div 내에서 콘텐츠를 수직으로 가운데에 배치하는 방법은 무엇입니까?

정의된 크기를 사용하여 Div 내에서 콘텐츠를 세로로 가운데 맞춤

사전 정의된 너비와 높이의 div로 작업할 때 콘텐츠를 세로로 정렬할 수 있습니다. 공통의 도전. 다양한 높이의 콘텐츠를 효과적으로 중앙에 배치하는 방법이 필요합니다.

해결책:

1. 상위 Div를 Table-Cell로 설정:

상위 div의 표시를 table-cell로 설정합니다. 이렇게 하면 콘텐츠 자체에 테이블 셀이 필요하지 않습니다.

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

2. 상위 Div를 블록으로, Content Div를 Table-Cell로 설정:

상위 div의 표시를 차단으로 설정하고 콘텐츠 div의 표시를 table-cell로 설정:

.area {
  display: block;
}

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

3. 상위 Div 부동, 콘텐츠 Div를 테이블 셀로 설정:

상위 div를 부동으로 설정하고 콘텐츠 div를 테이블 셀로 설정합니다. 이를 위해서는 여백에 대한 세심한 고려가 필요합니다:

.area {
  float: left;
}

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

4. 상위 Div 위치 상대, Content Div 위치 절대:

상위 div 위치를 상대 위치로, 컨텐츠 div 위치를 절대 위치로 설정합니다. 콘텐츠 높이를 결정하고 margin-top을 콘텐츠 높이의 절반으로 설정합니다. 이 솔루션은 각 사례에 대해 수동 조정이 필요합니다.

.area {
  position: relative;
}

.content {
  position: absolute;
  top: 50%;
  height: 50%;
  margin-top: -25%;
}

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