背景图片垂直对齐异常：background-position-y设为center未居中

问题描述 #

希望背景图片在所有屏幕分辨率下保持垂直居中，设置了background-position-y: center !important，但实际显示时图片仍处于页面顶部。使用的CSS代码如下：

body {
background: url('https://i.ibb.co/5npL7fr/shutterstock-2179562083-bg-1024x576-small.png');
background-repeat: no-repeat;
background-size: 100% auto;
background-position-y: center !important;
opacity: 1;
}

问题根源 #

background-position-y: center是相对于元素自身高度实现垂直居中，但默认状态下body元素的高度仅由内部内容决定。如果页面没有足够内容撑满浏览器视口，body的高度会远小于视口高度，此时背景图片的"垂直居中"只是在body的有限高度范围内居中，视觉上就会停留在页面顶部。

解决方法 #

需要让body的高度覆盖整个浏览器视口，这样背景图片才能基于视口高度实现真正的垂直居中，以下是两种可行方案：

方案1：设置html和body的高度为100% #

html, body {
height: 100%;
margin: 0; /* 清除默认边距，避免出现不必要的滚动条 */
}

body {
background: url('https://i.ibb.co/5npL7fr/shutterstock-2179562083-bg-1024x576-small.png');
background-repeat: no-repeat;
background-size: 100% auto;
background-position-y: center;
opacity: 1;
}

方案2：使用min-height: 100vh（推荐） #

vh是视口高度单位，100vh代表整个浏览器视口的高度，无需额外设置父元素：

body {
min-height: 100vh;
margin: 0;
background: url('https://i.ibb.co/5npL7fr/shutterstock-2179562083-bg-1024x576-small.png');
background-repeat: no-repeat;
background-size: 100% auto;
background-position-y: center;
opacity: 1;
}

内容的提问来源于stack exchange，提问作者creators