如何在 IE 7 中将 div 准确地居中于父 div 的中心（水平和垂直）答案

【问题标题】：How to center a div exactly at the center(horizontally and verically) of a parent div in IE7如何在 IE 7 中将 div 准确地居中于父 div 的中心（水平和垂直）
【发布时间】：2021-09-16 21:33:17
【问题描述】：

样式是：

.innerdiv{
display: inline-block;
vertical-align: middle;
width: 300px;
}
.outerdiv{
text-align: center;
background: #c0c0c0;
}
.outerdiv .before,.outerdiv:before {
content: '';
display: inline-block;
/**display: inline;*/
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}

HTML：

<div style="height:500px" class="outerdiv">

 <div class="innerdiv">
   <span class="" style="font-size:26px">Hello </span>
   <br/>
   <img style="width:150px" src="http://mrsdalesworkspace.pbworks.com/f/1302032618/desert(1).jpg"/>
 </div>

我想将内部 div 相对于外部 div 水平和垂直居中，并且上面的代码在除 IE7 之外的任何地方都可以正常工作。

我认为由于“之前”伪类的存在，它在 IE7 中不起作用。

我尝试使用

修复它

样式是：

.outerdiv{
text-align: center;
background: #c0c0c0;
*zoom: expression( 
this.runtimeStyle.zoom="1",
this.appendChild( document.createElement("small") ).className="after",
this.insertBefore( document.createElement("small"), this.firstChild ).className="before"
);

}

.outerdiv .before,.outerdiv:before {
content: '';
display: inline-block;
/**display: inline;*/
height: 100%;
vertical-align: middle;
margin-right: -0.25em;

}

我也无法使用这个来做到这一点。

我什至尝试过使用插件

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->

还有

<script type="text/javascript" src="http://jquery.lukelutman.com/plugins/pseudo/jquery.pseudo.js"></script>

还是不行。

我知道使用position:absolute 并设置顶部和左侧边距和位置我们可以实现它。我想用伪类来实现。

【问题讨论】：

stackoverflow.com/questions/8779607/… 关注此

标签： css internet-explorer-7

【解决方案1】：

这应该适用于所有浏览器：

.outerdiv {
     position:relative;
}

.outerdiv .innerdiv {
     position:absolute;
     top:50%;
     left:50%;
     width:200px;
     height:200px;
     margin-top:-100px; // height / 2
     margin-left:-100px; // width /2 
}

【讨论】：

我知道这适用于所有浏览器，但我需要一个使用伪类的解决方案..
为什么要使用伪类？您可以使用 code.google.com/p/ie7-js 这是一个 js hack...有关更多信息，请参阅 stackoverflow.com/questions/4181884/after-and-before-css-pseudo-elements-hack-for-ie-7

【解决方案2】：

IE7 根本看不懂::before 和::after。

这意味着它也不理解.outerdiv .before,.outerdiv:before 组合选择器。你应该把它们分开。

【讨论】：

【解决方案3】：

你可以试试这个课程：

.center {
     position: absolute; /* do not change */
     top: 50%; /* do not change */
     left: 50%; /* do not change */
     width: 80%; /* 80% of the parent's width. Of course, you can change this value. */
     height: 80%; /* 80% of the parent's width. Of course, you can change this value. */
     margin-top: -40%;  /* current height / 2 */
     margin-left: -40%; /* current width / 2 */
}

Example on codepen.io

【讨论】：