如何将一个 Div 垂直居中于另一个 Div 内？

将一个 Div 在另一个 Div 中垂直居中

当想要将一个 div 在另一个 div 中居中时，您的第一个方法可能是使用 margin-top 和 margin-left 值，如下面的 CSS 示例所示：

#outerDiv {
    width: 500px;
    height: 500px;
    position: relative;
}

#innerDiv {
    width: 284px;
    height: 290px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -147px;
    margin-left: -144px;
}

但是，只要内部 div 的大小发生变化，此方法就需要进行调整。对于更通用的解决方案，我们可以探索以下选项：

垂直居中对齐

使用vertical-align: middle将div在其父容器中垂直对齐。要使用此技术：

1. 设置父容器显示：table-cell，并使用vertical-align垂直对齐：middle。
2. 设置内部div显示：inline-块。

现代解决方案：

1.变换

变换提供了一种更简单的方法：

1. 将内部 div 绝对定位于顶部：50% 和左侧：50%。
2. 应用变换：翻译（-50％，-50％）以使div居中尺寸。

2。 Flexbox

Flexbox以其灵活性，提供了最省力的解决方案：

1. 设置父容器显示：flex。
2. 使用 justify-content ：center 和align-items：将内部div 水平和垂直居中。

您选择的具体方法将取决于您的兼容性要求和偏好。

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