Question

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

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

实验性的CSS Box Model规范是否有帮助？

感谢。

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

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

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

如何使中心圆居中？

4 个答案:

第一个答案