在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

这是一种保持流体高度和宽度的技术，垂直和水平地保持流体的死中心。兼容于IE8+

• 这是通过margin: auto和top: 0; left: 0; bottom: 0;和right: 0;之间的拔河结合来实现的。
• 使用百分比宽度和高度(它需要一个高度)
• 使用最小/最大宽度和最小/最大高度的组合

实验，以获得最好的结果，为您的项目。

这是一篇关于粉碎杂志的技巧的文章

CSS / HTML / Demo

​

.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>

​