Html 了解flexbox中的vh%及其含义

所以我将从我使用的代码开始

body {
    margin: 0;
    background-image: linear-gradient(hsl(273, 75%, 66%), hsl(240, 73%, 65%));
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card {
    height: 100px;
    width: 100px;
    background-color: aliceblue;
}

我想要一个彩色div在我的页面中心对齐，同时使用渐变作为背景。当我这样做的时候，结果很好

请注意，我在“height”属性中使用了“vh”，而在“width”属性中使用了“%”。当我将height属性更改为“%”时，结果如下所示：

因此背景开始重复，长方体不再居中

相反，当我将宽度更改为“vh”时，结果如下所示：

因此，盒子被进一步放在左边

谁能给我解释一下这个现象吗？我认为100vh和100%在设置到我的页面主体时或多或少是相同的

非常感谢你们的帮助，我期待着向你们学习！

我认为100vh和100%在设置到我的页面正文时或多或少是相同的？-->不，它们在设置到

html

元素时是相同的，而不是

正文