中心绝对div嵌套在bootstrap列中

Question

我试图在移动设备（bootstrap xs）的屏幕中心放置一个下拉div。我试图做一个小提琴，但引导程序没有正确显示。可以找到代码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

使用position：fixed而不是absolute。这将确保它在屏幕中处于相同位置。

以下内容将内容的左上角设置为中心 - 然后在两个方向上将其平移-50％将使元素的中心位于该中心点。

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