Question

我有这个css

position:relative;
margin: 0 auto;
top:50%;
width:15px;
height:15px;
background-color:#fff;
-moz-border-radius: 15px; 
-webkit-border-radius: 15px;
cursor:pointer;

它在Chrome上的中心很好，并且在IE和ff中保持最佳状态。

删除并更改位置：

这里有什么不对吗？

由于让

Answer 1

#div {
    position:relative;
    margin-left:-7.5px; // Half your width in negative
    margin-top:-7.5px; // Half your height in negative
    top:50%;
    left:50%;
    width:15px;
    height:15px;
    background-color:#fff;
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px;
    cursor:pointer;
}

这适用于所有浏览器。使用有效的代码，IE效果图可能很糟糕，但这是一种经过实践检验的方法，适用于我的通用工作。

要编辑它，只需更改负边距值即可匹配div元素的高度或宽度的一半。

Answer 2

水平居中的

margin: 0 auto;应该适用于IE6 +，但只要你处于标准模式。确保您在HTML中使用include a Standards Mode doctype，否则您将陷入Quirks模式，无法正常运行。

要确定特定网页是否处于标准模式，请在地址栏中输入javascript:alert(document.compatMode)。 CSS1Compat很好; BackCompat是Quirks。

对于没有绝对定位的垂直居中，top: 50%仅在父元素具有显式高度时才有意义。因此，如果您打算将自上而下推到浏览器高度的一半，那么您需要在元素的每个祖先上指定100%高度，例如。至少：

html, body { height: 100%; }

Answer 3

尝试使用margin-top: 30%;代替top:50%;
没有position:relative;需要。

修改
为了在IE中对齐中心，我使用div-wrapper来寻求帮助这是我的全部代码

<html> <head> <style type='text/css'> #myDivWrapper { text-align: center; /* x axis for ie*/ } #myDiv { /* set position */ margin: 0 auto; /* x axis */ margin-top: 30%; /* y axis */ /* draw div */ background-color: red; width: 200px; height: 200px; } </style> </head> <body> <div id='myDivWrapper'> <div id='myDiv'></div> </div> </body> </html>

div中心不适用于IE

3 个答案: