Question

目前我有一个垂直居中的所有内容的叠加层。它适用于现代浏览器和IE8的所有Internet Explorer版本。

在IE7中，这似乎不起作用。但经过一些研究后我发现IE7不支持display: table-cell;。这就是造成这个问题的原因。

但是，我不知道如何解决这个问题，以便它也适用于Internet Explorer 7。

有人可以帮我解决这个问题吗？

CSS

body.noscroll {
    position: fixed;
    overflow-y: scroll;
    width: 100%;
}

div#overlay {
    z-index: 1000;
    position: fixed;
    display: table;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.75);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#bd000000,endColorstr=#bd000000);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

div#overlay div#verticalCenter {
    display: table-cell;
    vertical-align: middle;
    padding: 15px;
}

HTML（简化）

<body class="noscroll">
    <div id="overlay">
        <div id="verticalCenter">
            Test 1 2 3 4 5 6 7 8 9 10
        </div>
    </div>
</body>

Answer 1

请参阅以下链接：

垂直中心工作除了IE7（表格单元格）

1 个答案: