如何使图像在 Div 中垂直和水平居中？

将图像在较大的 Div 中居中（垂直和水平）

网页设计中的一个常见要求是将图像在较大的 Div 中居中分区虽然可以使用文本对齐方式实现水平居中，但垂直对齐可能更具挑战性，特别是在跨浏览器兼容性方面。

解决方案：

将图像水平居中在垂直方向上，在较大的 div 内，可以结合使用绝对定位和自动边距。绝对定位允许图像相对于其父元素定位，而自动边距可确保元素水平和垂直居中。

以下是实现此解决方案的 CSS 代码：

img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

此代码将图像绝对定位在较大的 div 内，并将其顶部、底部、左侧和右侧边距设置为自动。这可确保图像在 div 内垂直和水平居中。

注意：

此解决方案适用于支持自动调整的现代浏览器 (IE >= 8)利润。对于较旧的浏览器，可能需要使用 Flexbox 或 CSS 网格等替代解决方案才能达到所需的效果。

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