Question

我正在使用以下CSS将div放在页面中间：

.someWrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.centredDiv {
    width: (some width);
    height: (some height)
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
          -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

我已经在Chrome，Firefox和Safari中对此进行了测试，它可以正常运行。但是，在Internet Explorer（在IE11上进行测试）中，虽然它确实将div放在窗口中间，但IE似乎认为仍然存在一个看不见的“幽灵div”。 50％横向和50％下降尚未转变。

这会在屏幕的右下角产生一大堆白色溢出空间和不必要的滚动条。如果我打开溢出：隐藏，这可以解决问题，但它在我的网站中不是一个可行的选项。

那么为什么IE会这样做并且有一种简单的方法来解决它？

编辑：以下代码说明了问题。在Chrome或Firefox中打开代码，没有溢出。在IE中打开它（在IE11中测试），你会看到溢出导致空白和滚动条到底部和右边。

<!DOCTYPE HTML>
  <html>
    <head>
     <style>
       html, body {
         height: 100%;
         width: 100%;
         margin: 0;
         padding: 0;
       }

       #wrapper {
         width: 100%;
         height: 100%;
         position: relative;
       }

       #centred {
         width: 90%;
         height: 90%;
         position: absolute;
         top: 50%;
         left: 50%;
         background-color: red;
         -webkit-transform: translate(-50%, -50%);
         -moz-transform: translate(-50%, -50%);
         -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
       }
     </style>
   </head>
 <body>
   <div id="wrapper">
     <div id="centred">
       Hello world!
     </div>
   </div>
 </body>
</html>

Answer 1

更简单的方法

而不是top和left的定位，而不是bottom和right。完成此操作后，只需将-50%翻译更改为正{1}}即可。这将删除溢出，例如

50%

您可以在此处查看这些更改：http://jsfiddle.net/bd17gsss/

值得注意的是，此错误仍然存在，我们的团队仍会在时间和周期允许的情况下给予适当的考虑。

原始答案

在此特定演示中似乎存在.center-center { position: absolute; bottom: 50%; right: 50%; transform: translate(50%, 50%); }的布局错误。当它不应该时，它的行为类似于position: absolute。我已经在这个问题上打开了一个错误，让Internet Explorer团队进一步调查。

目前，您可以将位置值从position: relative切换为absolute，这似乎可以正确渲染居中元素。这可以防止您不得不一遍又一遍地使用一组固定的维度，而是允许您将此方法用作通用fixed样式类，该类将使应用的任何内容居中。

此更改的明显警告是您的元素根据视口定位，而不再是文档本身。这将有效地将其冻结在屏幕上。

.modal

为了证明这种方法具有不同维度的成功，我们可以循环一些示例集并测试元素的呈现以确保它正确居中：

.modal {
    position: fixed;
    top: 50%; left: 50%;
    background-color: red;
    transform: translate(-50%, -50%);
}

最终结果可以在线查看：http://jsfiddle.net/jonathansampson/c00u5ev8/

Answer 2

如果实际上只是在另一个帖子中回答了这个问题，您可以使用display: table;和display: table-cell;来解决此问题（也可以使用跨浏览器！），请在此处查看我的实时代码：{{ 3}}

在你的情况下，它将是：

#wrapper {
  display: table;
  width: 100%;
  height: 100%;
}

#centred {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

Answer 3

如果其他任何人仍然可以尝试解决此问题（因为Internet Explorer的错误从未得到修复，因为我们所有人都喜欢解决这些问题，所以它从未得到修复），并且您希望能够使用{{1 }}，而不是position: relative;，或者顶部和左侧而不是底部和右侧，请尝试以下操作：

position: absolute;

您可以使用100个视图高度/视图宽度或代表最大理论滚动高度/宽度的任意像素值，以使顶部/左侧值永远不会溢出父级，然后在转换中抵消它。

如果我和希特勒，斯大林以及Internet Explorer一起乘电梯，而我的枪只有一发子弹……我会杀死Internet Explorer。

Answer 4

您的代码太简短，没有工作示例，很难提供任何建议。我担心(some dynamic height/width)部分，即这可能会让我感到困扰。

供您参考，您可以查看Microsoft自己对Transform in IE的解释。

Answer 5

对我来说，翻译不能在IE 11中运行的问题只是该页面在兼容模式下自动运行，导致IE 11运行，好像它是一个较旧的浏览器，不支持CSS中的翻译。

我的解决方法只是将此标记放在头部：

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  ....

这告诉IE使用“最新”代码运行，这实际上意味着IE 11使用IE 11代码呈现页面而不是浏览器的旧版本。

如果要冻结与某些特定版本的IE的兼容性，可以使用此标记，使用不同的“内容”值。值“IE-Edge”告诉它使用最新的代码。

如果要查看您的页面是否以兼容模式呈现，请按F12在浏览器中打开Developer Tools，切换到“Console”选项卡，然后重新加载页面。控制台选项卡将显示如下内容：

http://yoursite.com is running in Compatibility View because ...

如果它确实在兼容模式下运行。

Answer 6

只需在变换线下方添加transition: all .2s ease-in-out;即可。

CSS3转换属性在Internet Explorer中的工作方式不同

6 个答案: