混淆 CSS 绝对定位

Question

我正在尝试使用 CSS 绝对定位将此圆圈置于空白页面的中心，但由于某种原因它已关闭，大圆圈内的小点的中心也是如此。

如果有任何建议或说明，那就太好了！

下面是我的代码：

HTML:

 <html>
 <body>
    <div id="circle">
            <div id="center"></div>
        </div>
 </body>
 </html>

CSS:

 #circle {
    width: 300px;
    height: 300px;
    background: black;
    border-radius: 50%;
    border-width: 10%;
    border-color: tan;
    border-style: solid;
    position: absolute;
    left: 50%;
    top: 50%;
}

#center {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: black;
    position: absolute;
    top: 50%;
    left: 50%;
}

Answer 1

我想我可能已经自己回答了！

div 偏离中心，因为我使用百分比来缩放它们的位置。因此，它们的固定尺寸偏离了百分比设置的定位。

例如圆的固定大小是0，就是圆心

祝一切顺利！

Answer 2

要垂直和水平居中，添加以下内容css：

margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;

http://jsfiddle.net/tfn4t263/

出现此问题是因为即使您指定了 left: 50%，它也是从 div 的最左边缘计算的...因此是您圆圈的最左边缘。这意味着您的圈子会向右倾斜。

（适用于 IE8 及更高版本...如果您想知道的话。）

混淆 CSS 绝对定位

Confusion with CSS absolute positioning

html

css

position