Css 如何使中心圆居中？

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

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

实验性的CSS盒模型规范在这里会有帮助吗

谢谢

.parent{显示：表；
保证金：50px自动；
背景：浅灰色；
高度：100px；
宽度：100px；}
.middle{显示：表格单元格；
垂直对齐：中间；}
.圆{边距：自动；
边框：实心10px蓝色；
边界半径：50%；
不透明度：0.3；
宽度：50px；
高度：50px；}
圆{宽度：15px；
高度：15px；}

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

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

---

要使小圆圈在大圆圈内居中，只需在

.circle.circle

上使用此选项：

margin-top: 7px;

使用

边距：auto

将内圈水平对齐。要使这个东西垂直居中，请在外圆的大小固定的情况下计算顶部边距。基本上是这样的：

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

第一个答案 解决在大圆圈内使小圆圈居中的问题，即使大圆圈变大

如果<代码>父< /代码>的大小增加，大圆圈应该缩放，小的应该保持小而中间。对吗？然后，这可能会起作用-尝试更改父对象的宽度：

演示

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

HTML

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

---

您需要为中间容器提供适当的

填充

，这将有助于将内容带到中心

您可以通过给

左

来实现同样的效果，即将

.middle

设置为：

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

此外，您必须为您的孩子

div.circle

指定

宽度

和

高度

并结合

边框半径

，使其对齐并形成圆形

最后，你需要利用内圈的边缘来对齐它

---

参见此

您可以使用

网格

的

放置项目

。外圆在此定义为网格

.parent{
显示：表格；
保证金：50px自动；
背景：浅灰色；
高度：100px；
宽度：100px；
}
.中{
显示：表格单元格；
垂直对齐：中间对齐；
}
.圆圈{
保证金：自动；
边框：实心10px蓝色；
边界半径：50%；
不透明度：0.3；
宽度：50px；
高度：50px；
/*下面添加了两行*/
显示：网格；
放置项目：中心；
}
.圈，圈{
宽度：15px；
高度：15px；
}

感谢您的快速响应。两个圆圈的w/h都是静态的，而家长的w/h是动态的。@DRAGON我已经更新了我的答案。希望这是您想要的。您现在可以更改家长的大小，但两个圆圈都居中。是的。您更新的响应几乎就在那里。（margin:auto；）帮助水平居中。是否有一种动态方式来垂直设置内圈？而不是（页边顶部：7px；）？再次感谢。非常感谢您的快速回复。页边：自动；水平居中两个圆圈。是否有一种动态方式来设置内圈？而不是（页边顶部：8px；）？再次感谢。你可以给margin:7px，而不是给top:8px，但这是一样的。你的其他大多数类都使用静态宽度，所以它非常麻烦。此外，你使用的静态值非常小，我想，你可以继续这样做

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

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