嵌套在引导列中的中心绝对 div

Question

我正在尝试将下拉 div 置于移动设备屏幕的中心（bootstrap xs）。我试着做一个小提琴，但引导程序没有正确显示。代码可以在here找到。

我无法在其容器外对齐 div，导致屏​​幕上出现奇怪的分布。当我使用百分比设置每个下拉菜单的 positionX 时，它会起作用，但不同的屏幕分辨率会给出不同的结果：

#winePrice .dropdown-content {
    left: 50%;
    transform: translateX(24%);
}
#wineType .dropdown-content {
    left: 0%;
    transform: translateX(-37%);
}
#wineLocation .dropdown-content {
    left: 0%;
    transform: translateX(-98%);
}

没有这个调整它看起来像这样：

有没有一种更简洁的方法来强制绝对 div 对齐到窗口而不是其父窗口？

Answer 1

使用位置：固定而不是绝对。这将确保它在屏幕中的相同位置。

以下内容会将内容的左上角设置为中心 - 然后将其在两个方向上平移 -50% 会将元素的中心带到该中心点。

#winePrice .dropdown-content {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}