可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
I am using the following CSS to centre a div in the middle of my page:
.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%);
}
I have tested this in Chrome, Firefox and Safari and it works as intended. However, in Internet Explorer (testing on IE11), while it does centre the div in the middle of the window, IE seems to think there is still an invisible 'ghost div' 50% across and 50% down which has not been transformed.
This results in a whole bunch of white overflow space and unnecessary scrollbars in the bottom right corner of the screen. If I turn on overflow: hidden, this can fix the issue, but it is not a feasible option in my website.
So why does IE do this and is there an easy way to get around it?
EDIT: The following code illustrates the problem. Open the code in Chrome or Firefox, there is no overflow. Open it in IE (testing in IE11) and you will see overflow causing white space and scroll bars to the bottom and to the right.
<!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>
回答1:
Easier Approach
Instead of positioning from the top and left, position instead from the bottom and right. After you've done this, simply change your -50% translations to positive 50%. This will remove the overflow e.g.
.center-center {
position: absolute;
bottom: 50%;
right: 50%;
transform: translate(50%, 50%);
}
You can see these changes in action here: http://jsfiddle.net/bd17gsss/
It's worth noting that this bug is still filed, and our team will still give it the appropriate consideration when time and cycles permit us to do so.
Original Answer
There appears to be a layout bug with position: absolute in this particular demo. It's behaving similar to position: relative when it shouldn't be. I've opened a bug on this issue for the Internet Explorer team to investigate further.
For now, you could switch your position value from absolute to fixed, which appears to render the centered element correctly. This prevents you from having to use a fixed set of dimensions over and over, and instead allows you to use this approach as a general-purpose .modal style class that will center anything it is applied to.
The obvious caveat with this change is that your element is positioned according to the viewport, and no longer the document itself. This will freeze it on the screen effectively.
.modal {
position: fixed;
top: 50%; left: 50%;
background-color: red;
transform: translate(-50%, -50%);
}
To demonstrate the success this approach has with various dimensions, we can cycle through a few example sets and test the rendering of the element to ensure it is properly centered:
(function () {
var xandy,
index = 0,
modal = document.querySelector( ".modal" ),
sizes = [
{ x: "50%" , y: "30%" },
{ x: "400px", y: "288px" },
{ x: "25vw" , y: "75vh" },
{ x: "90%" , y: "90%" }
];
setInterval(function changeSize () {
xandy = sizes[ index++ % sizes.length ];
modal.style.width = xandy.x;
modal.style.height = xandy.y;
}, 1000 );
}());
The end-result can be viewed online here: http://jsfiddle.net/jonathansampson/c00u5ev8/
回答2:
If anyone else is still having fun trying to work around this issue (seeing as Internet Explorer bugs never get fixed because we all love having to work around them instead), and you'd like to be able to use position: relative; instead of position: absolute;, or top and left rather than bottom and right, try this instead:
.centredDiv {
position: relative;
top: calc(50% - 100vh);
left: calc(50% - 100vw);
transform: translate(-50%, -50%) translate(100vw, 100vh);
}
You can use 100 view height/view width or an arbitrary pixel value representing a maximum theoretical scroll height/width so that the top/left values would never conceivably overflow the parent, and then just offset that in the transform.
If I was in an elevator with Hitler, Stalin, and Internet Explorer, and I had a gun with only 1 bullet... I would kill Internet Explorer.
回答3:
If actually just answered this very question in another thread, you can use display: table; and display: table-cell; to solve this issue (works cross-browser as well!), see my live code here: http://codepen.io/TheDutchCoder/pen/GggWqP
In your case it would be:
#wrapper {
display: table;
width: 100%;
height: 100%;
}
#centred {
display: table-cell;
vertical-align: middle;
text-align: center;
}
回答4:
Your code is too abbreviated and with no working example it is hard to offer any advice. I am concerned about the (some dynamic height/width) part, i.e. this strikes me as a place where your problem could be.
For your reference, you can check out Microsoft's own explanation of Transform in IE.
回答5:
For me, the issue with translate not working in IE 11 was simply that the page was automatically running in compatibility mode, causing IE 11 to run as if it were an older browser, which does not support translate in CSS.
My fix was simply to put this tag in the head:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
....
This tells IE to run in using the "latest" code, which essentially means that IE 11 renders the page with IE 11 code and not as an older version of the browser.
If you want to freeze the compatibility to some specific version of IE you can do that to with this tag, by using different "content" values. The value "IE-Edge" tells it to use the latest code available.
If you want to see if your page is being rendered in compatibility mode, press F12 to bring up Developer Tools in the browser, switch to the "Console" tab, and reload the page. The console tab will say something like:
http://yoursite.com is running in Compatibility View because ...
if it is indeed running in compatibility mode.
回答6:
Just add transition: all .2s ease-in-out; below your transform line.
