javascript - 在 IE8 中工作的居中模式

Question

我正在尝试将我的模态居中并且我有以下代码 http://jsfiddle.net/be34jkzk/4/

这是我的代码。我只是想确保模式居中并且有点响应。我尝试将 modalPopupClass 的代码更改为类似这样的代码，但它在 IE8 上显示得很奇怪。

CSS:

.modalPopupClass{
    display:none;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50%;
    max-width: 630px;
    min-width: 320px;
    height: auto;
    z-index: 4020;
    transform: translateX(-50%) translateY(-50%);
    }

Answer 1

这是一种在垂直和水平方向上保持流体高度和宽度 div 死点的技术。兼容IE8+

• 这可以通过 margin: auto 和 top: 0; 之间的拉锯战来实现。左:0；底部:0； 和 右侧:0；

• 使用百分比宽度和高度(它需要一个高度)

• 使用最小/最大宽度和最小/最大高度的组合

通过实验为您的元素获得最佳结果。

Here is a write up on the technique over on Smashing Magazine

CSS/HTML/演示

.dead-center {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: #F00;
  height: 50%;
  width: 50%;
  min-width: 100px;
  min-height: 100px
}

<div class="dead-center"></div>