如何将一个中心圆放在另一个圆内？答案

【问题标题】：How to place a centered circle inside an other?如何将一个中心圆放在另一个圆内？
【发布时间】：2009-10-27 03:50:39
【问题描述】：

我想将一个较小的圆圈放在另一个较大的圆圈中。（不完全是圆圈，而是戒指。没关系..）
两个圆圈都应该在我的页面正文中垂直和水平居中。（好像它们有保存中心）
我的目标是制作一个雷达（类似这样的东西-->[http://media.photobucket.com/image/radar/scottb57/radarScreen-719485.jpg），但雷达中的环数将根据一些参数。
我应该玩 z-index 吗？

【问题讨论】：

最新版本！没关系我会把我的版本改成你答案的版本！呵呵呵呵

标签： css

【解决方案1】：

有一种方法可以做到这一点，而无需根据每个 img 的大小对其进行任何数学计算或硬编码位置。

当然，有一个很大的折衷——标记要求每个 img 都包含在 2 个 divs 中。但是您不必每次添加（或删除）img 时都更新 CSS。

<html>
   <head>
      <style type="text/css">
         /**
          * omit styles for 'div#i' if centering on page
          */
         div#i {
            position: relative;
            /**
             * set any positioning or sizing, just make
             * sure that 'height' or 'min-height' is set
             */
            height: 99.44%;
         }
         div#i>div {
            /**
             * for the outer div of each img, put its upper-
             * left corner in the center (50%, 50%) of div#i
             */
            position: absolute;
            left: 50%;
            top: 50%;
         }
         div#i>div>div {
            /**
             * the inner div of each img will be the same size
             * as the img itself, so these 50% values refer to
             * half the img width and height; move the center of
             * this inner div to upper-left corner of outer div
             */
            margin-left: -50%;
            margin-top: -50%;
            display: inline-block;
         }
         div#i>div>div>img {
            /**
             * this plus the above inline-block style will
             * vertically center img within the inner div
             * (normally it's baseline-aligned)
             */
            vertical-align: middle;
         }
      </style>
   </head>
   <body>
      <div id="i">
         <div>
            <div>
               <img src="a.png">
            </div>
         </div>
         <div>
            <div>
               <img src="b.png">
            </div>
         </div>
         <div>
            <div>
               <img src="c.png">
            </div>
         </div>
         <!--
            etc.
         -->
      </div>
   </body>
</html>

【讨论】：

【解决方案2】：

可能有更好的方法，但这是我见过和使用过的：

<html>
   <head>
      <style type="text/css">
         img {
            /* this puts every img's upper-left corner in center of page */
            display: block;
            position: absolute;
            left: 50%;
            top: 50%;
         }
         /* now move each img upwards and leftwards to center it */
         img#a {
            /* this img is 206x42 */
            margin-left: -103px;
            margin-top: -21px;
         }
         img#b {
            /* this img is 84x90 */
            margin-left: -42px;
            margin-top: -45px;
         }
         img#c {
            /* this img is 12x20 */
            margin-left: -6px;
            margin-top: -10px;
         }
      </style>
   </head>
   <body>
      <img id="a" src="a.png">
      <img id="b" src="b.png">
      <img id="c" src="c.png">
   </body>
</html>

【讨论】：