css - 如何水平居中可拖动模态

Question

我有一个弹出窗口，它应该是 position:fixed 并且可以拖动。问题是，每当弹出窗口时，它都会使用 css 转换，因此它的所有属性都是动画的。我曾尝试使用 left:50% transformX:(-50%) 将其水平居中，但弹出窗口在出现时水平跳转(因为它为变换设置动画) ).我也尝试过将它居中 left:0 right:0 margin:0 auto;但是当您开始拖动时，窗口也会跳出位置。这些问题仅在窗口首次出现或第一次被拖动时出现，第一次拖动后一切正常。

我将以下选项传递给可拖动 setter 。

elem.draggable({ start: function() {

$(this).css({transform: "none", top: $(this).offset().top+"px", left:$(this).offset().left+"px"});

} });

这个 fiddle 以 margin:0 auto 为中心 here is a fiddle demonstrating my problem

这个 fiddle 以 left:50% transform:translateX(-50%); 为中心

second fiddle

Answer 1

您是否尝试过给模态框一个宽度然后使用 margin:0 auto;通常，为了使元素居中，您需要为该元素指定一个宽度。

.centeredElement {
    margin: 0 auto;
    width: 960px;
}