使用 CSS 在 Div 中居中放置超大图像

处理图像容器宽度变化的流体布局时，在 div 中居中放置超大图像会变成一个挑战。传统的 CSS 方法，例如将 margin-left 和 margin-right 设置为 auto，仅适用于小于周围 div 的图像。

要解决此问题，请考虑以下 CSS 解决方案：

.parent {
    position: relative;
    overflow: hidden;
    // Optional height and width settings based on the desired design
}

.child {
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}

此方法可确保任何图像，无论大小如何，都将在其父 div 内水平和垂直居中。负的顶部、底部、左侧和右侧值本质上强制图像填充父项内的整个空间，并且边距：自动规则将其在该空间内居中。

通过隐藏溢出超出父项的任何元素父div使用overflow:hidden，过大的图像将在两边均匀地被切除，创建所需的居中效果。