如何在具有定義尺寸的 Div 中垂直居中內容？

在定義尺寸的Div 內垂直居中內容

使用預先定義寬度和高度的div 時，可以垂直對齊其內容一個共同的挑戰。人們需要一種有效地將不同高度的內容居中的方法。

解：

1。 Parent Div as Table-Cell:

設定父div的顯示為table-cell。這消除了內容本身對表格單元格的需求：

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

2。父 Div 作為 Block，Content Div 作為 Table-Cell：

設定父 div 的顯示為 block，內容 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 相對定位，內容 Div 絕對定位：

將父 div 的位置設為相對，將內容 div 的位置設為絕對。決定內容高度並將上邊距設定為內容高度的一半。此解決方案需要針對每種情況進行手動調整：

.area {
  position: relative;
}

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

以上是如何在具有定義尺寸的 Div 中垂直居中內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！