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

将图像在容器 Div 内垂直和水平居中

当希望在较大的 div 中精确定位图像时，实现垂直和水平居中水平对齐可能会带来挑战。实现此操作的方法如下：

水平对齐：

要将图像在 div 内水平居中，请利用应用于父 div 的 CSS 的 text-align: center 属性。这会将 div 中的所有内容（包括图像）居中。

垂直对齐：

实现垂直对齐需要不同的方法。一种有效的技术涉及使用绝对定位：

• 将图像的位置设置为绝对，表示它相对于其最近定位的祖先（在本例中为父 div）绝对定位。
• 应用保证金：自动；启用自动边距，这将使图像在可用空间内居中。
• 将顶部、左侧、右侧和底部设置为 0 可确保图像覆盖父 div 的整个高度和宽度。

CSS 示例：

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

通过组合水平对齐方式text-align：使用带边距的绝对定位进行居中和垂直对齐，您可以在更大的边界 div 内有效地将图像居中。

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