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是偏离中心的，因为我使用百分比来缩放它们的位置。结果，它们的固定尺寸会使百分比设定的位置偏离。

E.g。是圆的固定大小是0，它将是中心。

一切顺利！

Answer 2

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

public class coin extends AppCompatActivity {
private volatile long coinsNumber=0;
private volatile long income;
private volatile long coinsPerClick;
private volatile int packOfCiggarreteNumber;
private volatile int item2Number;
private volatile int item3Number;
private volatile int item4Number;
private volatile int item5Number;
private volatile int item6Number;
private volatile int item7Number;
private volatile int item8Number;
private volatile int item9Number;
private volatile int item10Number;
private volatile int packOfCiggarretePrice;
private volatile int item2Price;
private volatile int item3Price;
private volatile int item4Price;
private volatile int item5Price;
private volatile int item6Price;
private volatile int item7Price;
private volatile int item8Price;
private volatile int item9Price;
private volatile int item10Price;
public coin (long coinsNumber1, long income1,long coinsPerClick1,int packOfCigarreteNumber1,int item2Number1,
               int item3Number1,int item4Number1,int item5Number1,int item6Number1,int item7Number1,int item8Number1,
               int item9Number1,int item10Number1,int packOfCiggarretePrice1,int item2Price1,int item3Price1,
             int item4Price1,int item5Price1,int item6Price1,int item7Price1,int item8Price1,int item9Price1,int item10Price1)
{
    coinsNumber = coinsNumber1;
    income=income1;
    coinsPerClick=coinsPerClick1;
    packOfCiggarreteNumber=packOfCigarreteNumber1;
    item2Number=item2Number1;
    item3Number=item3Number1;
    item4Number=item4Number1;
    item5Number=item5Number1;
    item6Number=item6Number1;
    item7Number=item7Number1;
    item8Number=item8Number1;
    item9Number=item9Number1;
    item10Number=item10Number1;
    packOfCiggarretePrice=packOfCiggarretePrice1;
    item2Price=item2Price1;
    item3Price=item3Price1;
    item4Price=item4Price1;
    item5Price=item5Price1;
    item6Price=item6Price1;
    item7Price=item7Price1;
    item8Price=item8Price1;
    item9Price=item9Price1;
    item10Price=item10Price1;
}

http://jsfiddle.net/tfn4t263/

问题出现了，因为即使您指定了margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;，它也会从div的最左边开始计算...所以圈子的最左边。这意味着您的圆圈将偏向右侧。

（在IE8以上工作......万一你想知道。）

与CSS绝对定位混淆

2 个答案: