如何将设置了position:absolute的下拉菜单内登录卡片居中显示

问题原因 #

你当前的下拉登录卡片偏移是两个原因共同导致的：

1. 绝对定位的.drop_menu没有对应的相对定位父容器，定位参考节点不符合预期
2. 给.drop_menu设置了无效的margin-right: 300px，强制把元素向左拉偏

修复方案 #

你只需要修改两处CSS即可实现登录卡片在「Thành Viên」按钮正下方居中显示：

1. 给下拉触发容器.drop添加相对定位，作为.drop_menu的定位参考
2. 删除.drop_menu的margin-right: 300px属性，新增水平居中的定位属性

修改后的完整CSS代码如下：

/* 新增这一段样式 */
.drop {
  position: relative;
}

.drop_menu {
    position: absolute;
    display: none;
    background: #fbfbfb;
    border-radius: 8px;
    box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.65);
    /* 删掉原来的margin-right: 300px; */
    height: 410px;
    width: 329px;
    z-index: 1;
    /* 新增下面三行实现水平居中+贴合按钮底部 */
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}

实现逻辑 #

• top: 100% 让下拉卡片顶部刚好对齐父按钮的底部
• left: 50% 让卡片的左边缘对齐父按钮的水平中线
• transform: translateX(-50%) 让卡片向左偏移自身宽度的50%，刚好实现整体水平居中

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