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; left: 0; bottom: 0;和right: 0;之间的拉锯战结合
使用百分比宽度和高度（需要高度）
使用最小/最大宽度和最小/最大高度

尝试为您的项目获得最佳效果。

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

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>

在IE8中工作的居中模式

1 个答案: