如何在 Div 中垂直居中内容？-css教程-PHP中文网

如何在 Div 中垂直居中内容？

Linda Hamilton

发布： 2024-11-28 05:58:10

原创

534 人浏览过

How to Vertically Center Content Within a Div?

定义的 Div 尺寸内的内容垂直对齐

可以通过多种方法实现在指定宽度和高度的 div 内垂直居中内容。让我们探索一些流行的选项：

1。显示：父 Div 的 Table-Cell

将父 div 的显示设置为 table-cell 并在子内容上使用 Vertical-align: middle 允许垂直居中。

.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 和显示：表格单元格

浮动父 div 并将子内容的显示设置为表格单元格也会导致垂直居中。

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

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

登录后复制

4. Position:relative 和position:absolute

通过将父div的位置设置为相对，子内容的位置设置为绝对，top设置为50%，margin-top设置为-50%，可以实现垂直居中实现了。不过这种方法需要针对不同高度场景进行手动调整。

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

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

登录后复制

以上是如何在 Div 中垂直居中内容？的详细内容。更多信息请关注PHP中文网其他相关文章！