无法垂直对齐div：宽屏正常窄屏顶部对齐问题求助

修正后的完整代码 #

<html>
<head>
    <style>
        html, body {
            margin: 0;
            color: white;
        }

        html, body, #root { height: 100%; }
        #top, #bottom { margin: 1em; }

        #root {
            background-color: black;
            display: flex;
            flex-direction: column;
        }

        #middle {
            flex: 1;
            background-color: grey;
            overflow: hidden;
            /* 新增：将middle设为flex容器，支持子元素垂直+水平居中 */
            display: flex;
        }

        #box {
            margin: auto;
            aspect-ratio: 4/3;
            border: 3px solid red;
            max-width: calc(100% - 6px);
            max-height: calc(100% - 6px);
        }
    </style>
</head>
<body>
    <div id="root">
        <div id="top">Top panel</div>
        <div id="middle">
            <div id="box"></div>
        </div>
        <div id="bottom">Bottom panel</div>
    </div>
</body>
</html>

关键修改说明 #

• 给#middle添加display: flex：原代码中#middle是普通块级元素，内部的#box作为块级元素，margin: auto仅能实现水平居中，垂直方向无法分配剩余空间。将#middle设为flex容器后，#box会成为flex项目，此时margin: auto会在水平、垂直两个方向自动分配容器内的剩余空间，实现完全居中。
• 保留原有约束逻辑：#root的flex布局确保top、bottom面板占据自身高度，#middle填充剩余屏幕空间；#box的max-width和max-height减去border宽度，避免超出容器边界；aspect-ratio:4/3维持固定宽高比，保证元素始终按比例缩放。

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