Flex布局设置align-items:center无法实现双元素垂直居中对齐问题咨询

问题原因 #

1. 父flex容器#draggable-container的align-items: center仅能让两个直接子元素#menu-container和.draggable-game-content自身垂直居中对齐，但右侧.draggable-game-content高度为40rem，其内部的.draggable-game高度为38rem，没有设置内部对齐规则，默认顶对齐，导致内部卡片整体偏上。
2. 左侧.menu-list的水平定位参数错误，left: 25%配合translateX(-50%)会让菜单整体向左偏移出容器范围，同时ul自带浏览器默认内边距，也会干扰视觉对齐效果。

调整方案 #

修改对应CSS规则即可实现预期效果：

1. 给右侧内容容器添加flex垂直居中规则，让内部卡片和容器本身中线对齐
2. 修正左侧菜单的水平定位参数，清除ul默认样式，保证菜单在容器内水平居中

修改后的完整CSS代码 #

#draggable-container {
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.draggable-game-content {
    width: 100%;
    height: 40rem;
    /* 新增：内部内容垂直居中 */
    display: flex;
    align-items: center;
}

.draggable-game {
    position: relative;
    border: 1px solid black;
    border-radius: 25px;
    margin-left: 1.5rem;
    height: 38rem;
    text-align: center;
    /* 可选：内部文字垂直居中 */
    display: flex;
    align-items: center;
    justify-content: center;
}

#menu-container {
    width: 4rem;
    height: 30rem;
    border: 1px solid #000;
    border-radius: 15px;
    position: relative;
}

.menu-list {
    position: absolute;
    /* 调整：left从25%改为50%保证水平居中 */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* 新增：清除ul默认样式 */
    padding: 0;
    margin: 0;
    list-style: none;
}

.menu-item {
    display: block;
    margin-bottom: 1.5rem;
    border-radius: 50%;
    border: 1px solid #000;
    height: 2.5rem;
    width: 2.5rem;
    /* 可选：内部图标/文字居中 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-item:nth-child(2) {
    margin-bottom: 7rem;
}

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