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

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

将图像嵌入到较大的 div 中时，确保其正确对齐至关重要。垂直居中尤其具有挑战性。以下是如何有效实现水平和垂直居中：

带自动边距的绝对定位

一种有效的方法是使用带自动边距的绝对定位。此技术允许您将图像在 div 内水平和垂直居中，即使在包含的 div 缺乏固定高度的情况下也是如此。

要实现此解决方案：

1. 给出图像绝对定位使用position:absolute;。
2. 设置margin 属性为 auto；允许浏览器自动调整边距。
3. 指定 top、left、right 和 bottom 值为 0。这指示图像占据其父级的整个空间div.

以下是示例代码片段：

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

使用此技术，无论 div 的高度如何，图像都将在 div 内垂直和水平居中。

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