CSS 如何使中心圆居中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15427125/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to center the center circle?
提问by D4A60N
How to center the center circle (CSS only)? [Assume latest CSS3 browser support.]
如何使中心圆居中（仅限 CSS）？ [假设支持最新的 CSS3 浏览器。]
Must maintain v/h centering when parent w/h changes dynamically.
当父 w/h 动态变化时，必须保持 v/h 居中。
Would the experimental CSS Box Model spec help here?
实验性的 CSS Box Model 规范在这里有帮助吗？
Thanks.
谢谢。
http://jsfiddle.net/dragontheory/VdJFa/5/
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;}
采纳答案by Manish Mishra
You need to give your middle container, appropriate padding,It will help bringing the content to the center.
你需要给你的中间容器，适当的padding，这将有助于将内容带到中心。
You can achieve the same by giving a lefti.e. making your .middleas:
您可以通过给出一个leftie来实现相同的效果.middle：
.middle {
vertical-align: middle;
text-align:center;
left:10%;
position:relative; /*makes left effective*/
display:table-cell;
}
Also, you have to give your child div.circlea specific widthand heightcombined with border-radiusto align it and to give it a shape of circle.
此外，你必须给你的孩子div.circle一个特定的width和height结合border-radius来对齐它并给它一个圆形。
And finally you need to play with the margin of the inner circle to align it.
最后，您需要使用内圆的边距来对齐它。
see this fiddle
看到这个小提琴
回答by TimeWasterNL
It isn't the perfect solution, but it works for me. The centering tags that SHOULD be used didn't change anything here, so I hope anyone will come with a better solution.
这不是完美的解决方案，但对我有用。应该使用的居中标签在这里没有改变任何东西，所以我希望有人能提出更好的解决方案。
.circle .circle{
width: 15px;
height: 15px;
margin-top: 15%;
}
回答by insertusernamehere
To center the small circle within the big one simply use this on .circle .circle:
要将小圆圈置于大圆圈的中心，只需在 上使用它.circle .circle：
margin-top: 7px;
You align the inner circle horizontally using margin: auto. To get this thing vertically centered calculate the top margin as the size of the outer circle is fixed too. Its basically like this:
使用 水平对齐内圆margin: auto。为了让这个东西垂直居中，计算上边距，因为外圆的大小也是固定的。它基本上是这样的：
( outer circle (height) - inner circle (height + 2 x border) ) / 2
( 50 - 15 + 10 + 10 ) / 2 = 7.5px
First answer
第一个回答
Solves to center the small circle within the big one even if the big one gets bigger
解决即使大圆变大也将小圆居中于大圆
If the the size of parentincreases, the big circle should scale and the small one should stay small and in the middle. Is that correct? Then this could work - try to change the parent's width:
如果大小parent增加，大圆圈应该缩放，小圆圈应该保持在中间。那是对的吗？然后这可以工作 - 尝试更改父级的宽度：
Demo
演示
[Try before buy](http://jsfiddle.net/UhBLC/]
[先试后买](http://jsfiddle.net/UhBLC/]
HTML
HTML
<div class="parent">
<div class="circle">
<div class="tiny_circle"></div>
</div>
</div>
CSS
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;
}
