Html 模态不在屏幕中心，css

当我在同一页上使用serverel modals时，我在模式的中心出现了一些问题

所以每当我按下圆圈内的按钮，模态就会打开。页面上有6个模态，当然每个模态都有唯一的ID

在下图中，您可以看到第一个模型是centeret，只需使用hacks即可

但是，当我按另一个模型弹出时，它并没有居中，如下所示：

所以在我看来，javascript没有考虑屏幕的宽度或者类似的东西

以下是模态的CSS：

element {
    opacity: 1;
    visibility: visible;
    left: 50%;
}
.reveal-modal {
    top: -180px !important;
    width: 750px;
    background: url("modal-gloss.png") no-repeat scroll -200px -80px #EEE;
    position: absolute;
    z-index: 101;
    padding: 30px 40px 34px;
    border-radius: 5px;
}

---

如您所见，我使用的是百分比，但问题仍然存在。这个模态出了什么问题，因为它没有将所有模态居中？

对模态弹出窗口执行类似操作：

HTML:

小提琴：

---

在

顶部：-100px部分，-100px应该是弹出窗口高度的一半，因此，如果弹出窗口的高度为500px，则它应该具有
顶部：-250px
。
margin:auto
将自动将其水平居中，无论宽度如何
对模式弹出窗口执行类似操作：

HTML:

小提琴：

在
顶部：-100px部分，-100px应该是弹出窗口高度的一半，因此，如果弹出窗口的高度为500px，则它应该具有
顶部：-250px
。
margin:auto
将自动将其水平居中，无论其宽度如何
如果您想将绝对定位的元素居中，这里的代码每次都可以工作，无需任何调整（无负边距和50%偏移），它始终在其父元素内垂直和水平居中：

.element {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
}

请看这里：


.element{
左：0；
右：0；
排名：0；
底部：0；
保证金：自动；
位置：绝对位置；
宽度：100px；
高度：100px；
背景：#eee；
}
居中
如果您想将绝对定位的元素居中，这里的代码每次都可以运行，无需任何修改（无负边距和50%偏移），它始终在父元素内部垂直和水平居中：

.element {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
}

请看这里：


.element{
左：0；
右：0；
排名：0；
底部：0；
保证金：自动；
位置：绝对位置；
宽度：100px；
高度：100px；
背景：#eee；
}
居中
因为您已经定位了
。显示模式
您需要做的绝对是设置一个适当的偏移量来抵消
左：50%
值

尝试在
上设置
左边距：-375px
。显示模式
。这正好是该元素宽度（
750px
）的一半。
因为您已经定位了
。显示模式
您需要做的绝对是设置一个适当的偏移量来抵消
左侧：50%
值

尝试在
上设置
左边距：-375px
。显示模式
。这正好是该元素宽度（
750px
）的一半。
你能为它制作一把小提琴或其他东西吗？此外，您是否正在为此或其他内容使用jquery模态或创建自己的模态？是否在应用了
position:relative
的元素中使用了某些模态？是否可以发布HTML？
left:50%
不会将元素居中，这会将元素的左边缘置于页面的中心。您应该使用
margin:auto
的特定定位来居中元素，而无需演示，这很难说，但从屏幕截图上看，您的模态可能会影响彼此的布局，即使它们不可见。在元素上设置
可见性：hidden
或
不透明度：0
将使它们不可见，但仍会影响其他元素的布局。您可以为此创建小提琴或其他东西吗？此外，您是否正在为此或其他内容使用jquery模态或创建自己的模态？是否在应用了
position:relative
的元素中使用了某些模态？是否可以发布HTML？
left:50%
不会将元素居中，这会将元素的左边缘置于页面的中心。您应该使用
margin:auto
的特定定位来居中元素，而无需演示，这很难说，但从屏幕截图上看，您的模态可能会影响彼此的布局，即使它们不可见。在元素上设置
visibility:hidden
或
opacity:0
将使它们不可见，但仍会影响其他元素的布局。您的意思是什么？代码显示了如何在页面上水平和垂直居中放置一个元素，这正是问题所在，与OP的代码完全不同/无关。OP希望他们的代码得到修复，而不是替换（这里99%的问题都是这样）。OP应该能够使用我的代码来修复他们的代码，我认为一个通用的解决方案对任何有类似问题的人都更有帮助，我相信这正是这个网站的目的。此外，当只提供css时，修复OP的代码有点困难。你是什么意思？代码显示了如何在页面上水平和垂直居中放置一个元素，这正是问题所在，与OP的代码完全不同/无关。OP希望他们的代码得到修复，而不是替换（这里99%的问题都是这样）。OP应该能够使用我的代码来修复他们的代码，我认为一个通用的解决方案对任何有类似问题的人都更有帮助，我相信这正是这个网站的目的。此外，当只提供css时，修复OP的代码有点困难是的，当然。这是上述问题的最快和最简单的解决方案。谢谢是的，当然。这是上述问题的最快和最简单的解决方案。谢谢嗨，Shomz，谢谢你的贡献。我将在进一步开发的某个时候尝试这个，因为这将非常适合
.element {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
}