Question

我无法在另一个圈内建立一个圆心。

我无法理解什么是错的。我也试过用方块做，而且也不行。

继承我的jsfiddle。

.circle {
    width: 170px;
    height: 170px;
    border-radius: 85px 85px 85px 85px;
    background: lime;
}
.circle-inner {
width: 150px;
height: 150px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
border-radius: 75px 75px 75px 75px;          
background: red;

Answer 1

您可以为两个容器指定相同的大小，并为包装器添加填充，如padding:10px;。的 DEMO 即可。这是我想到的最简单的方式。

.circle {
    width: 150px;
    height: 150px;
    padding:10px;
    border-radius: 85px 85px 85px 85px;
    background: lime;
}

Answer 2

将此添加到您的内圈代码中：

position:relative;
top:10px;

请注意，您还可以使用简写方法使代码更清晰：

将border-radius: 75px 75px 75px 75px;更改为border-radius: 75px; .circle也是如此。

Answer 3

将CSS更改为：使您的圆圈大小相同，并为包含圆圈添加填充

/*My css*/

            .circle {
                width: 150px;
                height: 150px;
                border-radius: 50%;
                background: lime;
                padding:20px;
}

Answer 4

这是另一个使用选项：

.circle-inner {
    margin: auto;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

http://jsfiddle.net/John_C/x683mtbh/

CSS - Circle不适合另一个的中心

4 个答案: