我无法解决在 IE9 中将内容 block 居中的问题。 我尝试了网络上的各种东西，但没有用。如果可能的话，如果可以将其托管在我可以看到它工作的地方，我将不胜感激。
我已经定义了文档类型:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<![endif]-->
我也尝试在 head 部分添加这个，在评论“[if IE]”之前，甚至用“edge”替换“EmulateIE7”，都没有用:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
火狐/ Chrome :
IE 9:
CSS:
.zone {
width: 0;
height: 0;
border: solid transparent;
}
.container {
border: 4px solid #666;
position: relative;
float: left;
margin: 2px;
}
.zone-label {
background-color: #666;
color: white;
font-size: 25px;
font-weight: bold;
padding: 0 5px;
position: absolute;
margin: 0 -50% 0 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.layout {
/*position: relative;*/
}
.clear {
clear: both;
}
.zone-green-949 {
border-width: 120px 475px;
border-color: black green;
}
.container-green-949 {
width: 949px;
}
.zone-blue-308 {
border-width: 76px 154px;
border-color: black blue;
}
.container-blue-308 {
width: 308px;
}
.zone-purple-629 {
border-width: 159px 315px;
border-color: black purple;
}
.container-purple-629 {
width: 629px;
}
HTML:
<div class="layout">
<div class="container container-green-949">
<div class="zone zone-green-949">
<span class="zone-label">Zone 12</span>
</div>
</div>
<div class="clear">
<div>
<div class="container container-purple-629">
<div class="zone zone-purple-629">
<span class="zone-label">Slider</span>
</div>
</div>
<div class="container container-blue-308">
<div class="zone zone-blue-308">
<span class="zone-label">Zone 1</span>
</div>
</div>
<div style="clear: right;">
<div class="container container-blue-308">
<div class="zone zone-blue-308">
<span class="zone-label">Facebook Fan</span>
</div>
</div>
</div>
</div>
编辑:答案是添加这个(见下面 Hashem Qolami 的评论):-ms-transform:translate(-50%, -50%);
最佳答案
答案是添加这个(参见 Hashem Qolami 的评论):-ms-transform:translate(-50%, -50%);
关于css - IE9 和/或更早版本中的居中 block ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26295378/