背景图像垂直居中

Question

我正在尝试将我的背景垂直居中在 div 中。 我制作了一个架构以便更好地理解：

这就是我现在所拥有的：

如您所见，唯一的问题是图像比 div 高。

我不想调整图像大小，只是想让图像在 div 中居中。

我制作了第二张图片来解释：

我尝试过

vertical-align:center

但也没成功。

我无法发布 jsfiddle，因为我没有发布两个以上链接的声誉...我将其发布在评论中。

Answer 1

尝试这样做

background-attachment : absolute;

或

只需删除此代码

background-attachment : fixed;

Answer 2

有一个名为 background-position 的 CSS 属性。 背景位置采用 x 和 y 值，因此如果您将案例中的背景位置设置为 0% 50%。这会将背景位置向右移动 0%，向下移动 50%（中心）。

background-position:0 50%;

jsfiddle 示例

当你看到它的时候，也看看background-size，background-size有一些方便的属性“覆盖”，“包含”。

封面

将背景图像缩放到尽可能大，以便背景区域完全被背景图像覆盖。背景图像的某些部分可能在背景定位区域内看不到。

包含

将图像缩放至最大尺寸，使其宽度和高度都能适合内容区域

与背景位置一起，您可以根据 div 很好地管理背景大小和位置。