尝试在 IE8-11 和 Chrome/Firefox 中绝对居中 div

Question

我已经审查了一些关于此的 posts/questions，到目前为止，我想出了这个：

<!DOCTYPE html>
<html>
    <head>
    </head>
<style>
div.center {
    /* This centers the div horizontally and vertically, Except in IE 8-11 */
    display: block;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 25px;
    padding: 20px;
    width: 430px;
    height: 325px;
    background: #d2dfed;
}
</style>
    <body>
        <div class="center">
            <p>This page is reserved for a custom introduction to the system for your organization.</p>
        </div>
    </body>
</html>

这在 Chrome 中效果很好，但在 IE 中，我的框仍然是顶部和左对齐的。

直截了当，我正在寻找 HTML+CSS 解决方案。我知道这可以在 Javascript 中完成，但这是我们正在部署给客户的页面，这样他们就可以将自己的文本添加到我们的网站上，我们保持它越简单，他们就越不可能搞砸它起来，需要我们进行干预。

Answer 1

该页面在 IE 7 以上的所有 Internet Explorer 版本中都能正常呈现。这似乎与兼容性视图设置有关。您可以添加一个 IE=Edge 元标记（或者如您所提到的，删除任何与 IE 仿真有关的 IIS headers），以确保浏览器使用它可以使用的最新渲染引擎。要记住的一件事，我总是会想到，IE 默认启用 "Display intranet sites in compatibility view" 选项 - 因此 domain-based 环境中的所有内部页面将在全新安装时以兼容模式显示IE（除非元标记强制关闭设置）。

如果您的客户确实希望支持 <=IE7，您可以考虑添加一个 polyfill（这将允许旧浏览器表现得像它们支持更新的 HTML5/CSS3 元素），但这可能需要链接到外部内容（来自 CDN）或其他文件，如果他们只是在寻找模板，则可能无法解决。

感谢您的关注！

尝试在 IE8-11 和 Chrome/Firefox 中绝对居中 div

Trying to absolute center a div in IE8-11 and Chrome/Firefox

css

internet-explorer-8