百分比宽高未正常生效？100vmin容器下CSS布局问题求助

核心问题分析 #

1. 元素未渲染：#gameWrapper 设置了 display: none，导致内部所有元素（包括 #game 和 #ball）完全不渲染，自然看不到球的效果。
2. 定位参考缺失：绝对定位元素的百分比宽高是相对于最近的非static定位祖先计算的。#game 默认是 position: static，所以 #ball 会以 body 为参考，但 body 没有明确设置高度（默认由内容撑开），导致高度百分比失效；同时你期望的基于 #game 的100vmin尺寸计算也无法实现。

修正方案 #

调整后的CSS代码 #

body
{
    font-family: "Source Sans Pro";
    background: hsl(220, 10%, 5%);
    color: #FFF;
    margin: 0;
    overflow: hidden;
}

#game
{
    width: 100vmin;
    height: 100vmin;
    position: relative; /* 设置为相对定位，成为#ball的定位参考容器 */
    background: #222; /* 可选，方便观察game容器范围 */
}

#gameWrapper
{
    display: flex; /* 启用flex布局，让justify-center生效 */
    justify-content: center;
    align-items: center; /* 垂直居中game容器 */
    min-height: 100vh; /* 让wrapper占满视口高度 */
}

#ball
{
    background-color: #FFF;
    position: absolute;
    height: 5%;
    width: 5%;
    border-radius: 100%;
    top: 50%; /* 可选，让球在game容器内居中 */
    left: 50%;
    transform: translate(-50%, -50%);
}

调整后的HTML代码 #

<body>
    <div id="gameWrapper">
        <div id="game">
            <div id="padTop"></div>
            <div id="ball"></div>
            <div id="padBottom"></div>
        </div>
    </div>
</body>

关键修正点说明 #

• 移除 #gameWrapper 的 display: none，让内部元素正常渲染。
• 给 #game 添加 position: relative，使 #ball 的5%宽高基于 #game 的100vmin尺寸计算（即5vmin的宽高），符合你要的1:1比例下的相对大小。
• 给 #gameWrapper 设置 display: flex 和 min-height:100vh，让 #game 能在视口中水平垂直居中，同时让 justify-content: center 属性生效。

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