如何使用CSS在另一个圆圈内制作一个圆圈答案

【问题标题】：How to make one circle inside of another using CSS如何使用CSS在另一个圆圈内制作一个圆圈
【发布时间】：2021-05-21 19:27:10
【问题描述】：

我正在尝试使用 css 在另一个圆圈内制作一个圆圈，但我在使其完全居中时遇到了问题。我很近，但仍然不在那里。有什么想法吗？

<div id="content">
    <h1>Test Circle</h1>
    <div id="outer-circle">
        <div id="inner-circle">
            <span id="inside-content"></span>
        </div>
    </div>
</div>

这是我的 CSS：

#outer-circle {
    background: #385a94;
    border-radius: 50%;
    height:500px;
    width:500px;
}
#inner-circle {
    position: relative;
    background: #a9aaab;
    border-radius: 50%;
    height:300px;
    width:300px;
    margin: 0px 0px 0px 100px;
}

另外，这里有一个小提琴： http://jsfiddle.net/972SF/

【问题讨论】：

去掉边距，添加left: 100px; top: 100px;。
可能还需要使用 z-index，以确保内圈位于顶部 :)
@user5623896726 不需要 z-index。
不错，元素嵌套时不需要！

标签： css

【解决方案1】：

哒哒！

在 CSS cmets 中解释：

 #outer-circle {
   background: #385a94;
   border-radius: 50%;
   height: 500px;
   width: 500px;
   position: relative;
   /* 
    Child elements with absolute positioning will be 
    positioned relative to this div 
   */
 }
 #inner-circle {
   position: absolute;
   background: #a9aaab;
   border-radius: 50%;
   height: 300px;
   width: 300px;
   /*
    Put top edge and left edge in the center
   */
   top: 50%;
   left: 50%;
   margin: -150px 0px 0px -150px;
   /* 
    Offset the position correctly with
    minus half of the width and minus half of the height 
   */
 }

<div id="outer-circle">
  <div id="inner-circle">

  </div>
</div>

【讨论】：

这就像魔术！哈哈。谢谢你。我会尽快将您标记为答案！

【解决方案2】：

CSS3 中不需要额外的元素

您可以使用一个元素和一个 box-shadow 完成所有操作。

JSFiddle Demo.

CSS

#outer-circle {
    background: #385a94;
    border-radius: 50%;
    height:300px;
    width:300px;
    position: relative;
    box-shadow: 0 0 0 100px black;
    margin:100px;
}

【讨论】：

我的想法完全 +1。
这个答案超级辣。谢谢！

【解决方案3】：

如果你只想用一个 div 在圆内添加圆，那么使用 box-shadow。

div {
  border-radius: 50%;
  box-shadow: 0px 0px 0px 10px red, 0px 0px 0px 20px green, 0px 0px 0px 30px yellow, 0px 0px 0px 40px pink;
  width: 100px;
  height:100px;
  margin: 3em;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

很好，这是我认为只使用一个 div 的最佳解决方案。

【解决方案4】：

使用 CSS 转换属性解决了这个问题：

您可以参考此JS fiddle link 以获得以下输出： http://jsfiddle.net/suprabhasupi/74b1ptne/

div {
  border-radius: 50%;
  /* border: 1px solid red; */
}

.circle1 {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: red;
}

.circle2 {
  transform: translate(25%, 25%);
  width: 200px;
  height: 200px;
  background-color: green;
}

.circle3 {
   transform: translate(48%, 46%);
  width: 100px;
  height: 100px;
  background-color: blue;
}

<div class="circle1">
  <div class="circle2">
    <div class="circle3">
    
    </div>
  </div>
</div>

【讨论】：

我编辑了您的答案以包含以前仅在您的 jsFiddle 上可用的代码。将来，请在您的答案中包含相关代码，以便在第三方网站被删除或以其他方式不可用的情况下，答案仍然有用。还请尽量避免发布重复的答案或非常相似的答案，因为我看到您删除了一个看起来相同的答案。

【解决方案5】：

在外圆上使用position: relative，在内圆上使用position:absolute，并将所有偏移设置为相同的值。让高度和宽度的自动计算处理其余的（JSFiddle）：

#outer-circle {
    position:relative;
    background: #385a94;
    border-radius: 50%;
    height:500px;
    width:500px;
}
#inner-circle { 
    position:absolute;
    background: #a9aaab;
    border-radius: 50%;
    right: 100px;
    left: 100px;
    top: 100px;
    bottom: 100px;
    /* no margin, no width, they get automatically calculated*/
}

【讨论】：

【解决方案6】：

似乎top 是您唯一需要更改的内容 -> http://jsfiddle.net/972SF/12/

#inner-circle {
    position: relative;
    background: #a9aaab;
    border-radius: 50%;
    height:300px;
    width:300px;
    top: 100px; /* <--- */
    margin: 0px 0px 0px 100px;
}

【讨论】：

【解决方案7】：

只要使用box-shadow就可以得到你想要的效果：

小提琴演示：http://jsfiddle.net/972SF/16/

html 被缩减为：

<div id="content">
    <h1>Test Circle</h1>
    <div id="circle">
    </div>
</div>

CSS：

#circle {
    margin: 10em auto;
    background: #385a94;
    border-radius: 50%;
    height:200px;
    width:200px;
    -webkit-box-shadow: 1px 1px 0px 100px black;
       -moz-box-shadow: 1px 1px 0px 100px black;
            box-shadow: 1px 1px 0px 100px black;
}

它简单易行，可确保您的圈子始终完美地彼此相邻。

您可以通过将 box-shadow 上的第 4 个属性 ( 100px ) 更改为您想要的任何值来更改圆的大小。

【讨论】：

【解决方案8】：

看看这个fiddle

自动计算居中

#outer-circle {
    background: #385a94;
    border-radius: 50%;
    height:500px;
    width:500px;
    display:table-cell;
    vertical-align:middle;
}
#inner-circle {
    display:inline-block;
    background: #a9aaab;
    border-radius: 50%;
    height:300px;
    width:300px;
}

【讨论】：

【解决方案9】：

这是一个带有外边框的圆的示例。

HTML：

<div id="inner-circle"></div>

样式：

    #inner-circle {
    background: #385a94;
    border : 2px solid white;
    border-radius: 50%;
    height:30px;
    width:30px;
    position: relative;
    box-shadow: 0 0 0 1px #cfd1d1;
    }

查看结果： JSFiddle

【讨论】：

【解决方案10】：

试试，

 #inner-circle {
    position: absolute;
    background: #a9aaab;
    border-radius: 50%;
    height:300px;
    width:300px;
    margin: 15% 0px 0px 100px;
}

这是你的更新JSFIDDLE

【讨论】：

【解决方案11】：

看看我是如何定位 Divs 的，只需要border-radius 就可以了

.outer{width:500px;height:500px;background:#f00;border-radius:50%;position:relative;top:0;left:100;}
.inner{width:250px;height:250px;background:#000;border-radius:50%;position:absolute;top:125;left:125;}



   <div class="outer">

      <div class="inner">


      </div>

    </div>

DEMO

【讨论】：

【解决方案12】：

尝试给内圆一个top:50%，而不是margin-top：内圆一半高度的负值。

http://jsfiddle.net/972SF/19/

【讨论】：

【解决方案13】：

已解决！正是你想要的方式：

演示：http://jsfiddle.net/aniruddha153/RLWua/

HTML：

<div id="content">
   <div id="outer-circle">
      <div id="inner-circle">
      </div>
   </div>
</div>

CSS：

#content {
   position: relative;
   width: 100%;
   padding-bottom: 100%;
}

#outer-circle {
   position: absolute;
   width: 50%;
   height: 50%;
   background-color: #000000;
   border-radius: 50%;
}

#inner-circle{
  margin-top: 25%;
  margin-left: 25%;
  position: absolute;
  width: 50%;
  height: 50%;
  background-color: #e5e5e5;
  border-radius: 50%;
}

【讨论】：

@scapegoat17 试试上面的解决方案。

【解决方案14】：

您可以使用 CSS 的 top 和 left 属性使其居中。

body {
    width: 100%
    margin:0px;
    text-align: center;
}
#content {
    width: 500px;
    margin-left: auto;
    margin-right: auto;
}
#outer-circle {
    background: #385a94;
    border-radius: 50%;
    height:200px;
    width:200px;
}
#inner-circle {
    position: relative;
    background: #a9aaab;
    border-radius: 50%;
    height:100px;
    width:100px;
  top:50px;
  left:50px;
}

<div id="content">
    <h1>Test Circle</h1>
    <div id="outer-circle">
        <div id="inner-circle">
            <span id="inside-content"></span>
        </div>
    </div>
</div>

【讨论】：