如何在具有定义尺寸的 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中文网其他相关文章！