如何使中心圆居中？

Question

如何使中心圆居中（仅限 CSS）？ [假设支持最新的 CSS3 浏览器。]

当父 w/h 动态变化时，必须保持 v/h 居中。

实验性的 CSS 盒子模型规范对这里有帮助吗？

谢谢。

http://jsfiddle.net/dragontheory/VdJFa/5/

<div class="parent">
    <div class="middle">
        <div class="circle">
            <div class="circle"></div>
        </div>
    </div>
</div>

.parent         {display: table; 
                margin: 50px auto;
                background: lightgray;
                height: 100px;
                width: 100px;}

.middle         {display: table-cell; 
                vertical-align: middle;}

.circle         {margin: auto;
                border: solid 10px blue;
                border-radius: 50%;
                opacity: 0.3;
                width: 50px;
                height: 50px;}

.circle .circle {width: 15px;
                height: 15px;}

Answer 1

你需要给你的中间容器，合适的padding，这将有助于将内容带到中心。

您可以通过提供left 来实现相同的目的，即将您的.middle 设为：

.middle {
    vertical-align: middle;
    text-align:center;
    left:10%;
    position:relative; /*makes left effective*/
    display:table-cell;
}

另外，你必须给你的孩子div.circle 一个特定的width 和height 结合border-radius 来对齐它并给它一个圆形的形状。

最后你需要使用内圈的边距来对齐它。

看到这个fiddle

Answer 2

这不是完美的解决方案，但它对我有用。应该使用的居中标签在这里没有改变任何东西，所以我希望任何人都能提供更好的解决方案。

.circle .circle{
    width: 15px;
    height: 15px;
    margin-top: 15%;
}

Answer 3

要将小圆圈置于大圆圈的中心，只需在 .circle .circle 上使用它：

margin-top: 7px;

您使用margin: auto 水平对齐内圆。为了让这个东西垂直居中，计算上边距，因为外圆的大小也是固定的。基本上是这样的：

( outer circle (height) - inner circle (height + 2 x border) ) / 2
( 50 - 15 + 10 + 10 ) / 2 = 7.5px

Try before buy

第一个答案

即使大圆圈变大，也要解决小圆圈在大圆圈中的中心问题

如果parent 的大小增加，大圆圈应该缩放，小圆圈应该保持在中间。那是对的吗？然后这可以工作 - 尝试改变父母的宽度：

演示

[先试后买](http://jsfiddle.net/UhBLC/]

HTML

<div class="parent">
    <div class="circle">
        <div class="tiny_circle"></div>
    </div>
</div>

CSS

.parent{
    display: table; 
    margin: 50px auto;
    background: lightgray;
    height: 200px;
    width: 200px;
}

.circle {    
    display: table-cell;
    vertical-align: middle;
    background: blue;
    border-radius: 50%;
    opacity: 0.3;
    width: 100%;
    height: 100%;
}

.tiny_circle {
    margin: auto;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    background: red;
}

Answer 4

您可以使用grid 的place-items。外圈在这里定义为网格。

.parent {
  display: table;
  margin: 50px auto;
  background: lightgray;
  height: 100px;
  width: 100px;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.circle {
  margin: auto;
  border: solid 10px blue;
  border-radius: 50%;
  opacity: 0.3;
  width: 50px;
  height: 50px;
  /* Two lines below added */
  display: grid;
  place-items: center;
}

.circle .circle {
  width: 15px;
  height: 15px;
}

<div class="parent">
  <div class="middle">
    <div class="circle">
      <div class="circle"></div>
    </div>
  </div>
</div>