如何使用CSS在另一个圆圈内制作一个圆圈 [英] How to make one circle inside of another using CSS

问题描述

我正在尝试使用css在另一个圆的内部制作一个圆，但是我遇到了使其完全居中的问题.我很近，但仍然不在那儿.有什么想法吗?

I am trying to make one circle inside of another circle using css, but I am having an issue making it completely centered. I am close, but still not there. Any ideas?

<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/

Also, here is a fiddle: http://jsfiddle.net/972SF/

推荐答案

Ta da！

在CSS注释中进行了解释:

Explained in the CSS comments:

 #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>

这篇关于如何使用CSS在另一个圆圈内制作一个圆圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！