3

如何使中心圆居中（仅限 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;}
4

4 回答 4

3

您需要适当地提供中间容器，padding这将有助于将内容带到中心。

您可以通过给出一个leftie来实现相同的效果.middle：

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

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

最后，您需要使用内圆的边距来对齐它。

看到这个小提琴

于 2013-03-15T08:28:12.117 回答
1

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

.circle .circle{
    width: 15px;
    height: 15px;
    margin-top: 15%;
}
于 2013-03-15T07:54:50.793 回答
1

要将小圆圈居中在大圆圈中，只需在以下位置使用.circle .circle：

margin-top: 7px;

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

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

先试后买

第一个答案

即使大圆圈变大，也能将小圆圈居中在大圆圈内

如果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;
}
于 2013-03-15T08:07:01.847 回答
0

您可以使用place-itemsof 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>

于 2021-01-01T23:01:27.643 回答