Css 如何将一个中心圆放置在另一个中心圆内？
我想把一个较小的圆放在另一个较大的圆内。（不完全是圆，而是环。没关系……）Css 如何将一个中心圆放置在另一个中心圆内？,css,Css,我想把一个较小的圆放在另一个较大的圆内。（不完全是圆，而是环。没关系……） 这两个圆圈应在我的页面正文中垂直和水平居中。（好像它们有保存中心） 我的目标是制造一个雷达（像这样-->[），但雷达中的环数将取决于一些参数。 我应该玩z-index吗？可能有更好的方法，但这就是我所看到和使用的： <html> <head> <style type="text/css"> img { /* this puts
这两个圆圈应在我的页面正文中垂直和水平居中。（好像它们有保存中心）
我的目标是制造一个雷达（像这样-->[），但雷达中的环数将取决于一些参数。
我应该玩z-index吗？可能有更好的方法，但这就是我所看到和使用的：
<html>
<head>
<style type="text/css">
img {
/* this puts every img's upper-left corner in center of page */
display: block;
position: absolute;
left: 50%;
top: 50%;
}
/* now move each img upwards and leftwards to center it */
img#a {
/* this img is 206x42 */
margin-left: -103px;
margin-top: -21px;
}
img#b {
/* this img is 84x90 */
margin-left: -42px;
margin-top: -45px;
}
img#c {
/* this img is 12x20 */
margin-left: -6px;
margin-top: -10px;
}
</style>
</head>
<body>
<img id="a" src="a.png">
<img id="b" src="b.png">
<img id="c" src="c.png">
</body>
</html>
img{
/*这会将每个img的左上角放在页面的中心*/
显示：块；
位置：绝对位置；
左：50%；
最高：50%；
}
/*现在向上和向左移动每个img使其居中*/
img#a{
/*此img为206x42*/
左边距：-103px；
利润上限：-21px；
}
img#b{
/*这个img是84x90*/
左边距：-42px；
边缘顶部：-45px；
}
img#c{
/*这个img是12x20*/
左边距：-6px；
利润上限：-10px；
}
有一种方法可以做到这一点，而无需根据每个img
的大小对其进行任何数学运算或硬编码
当然，标记需要将每个img
包装在2div
s中，这是一个很大的折衷。但是，您不必每次添加（或删除）img
时都更新CSS
<html>
<head>
<style type="text/css">
/**
* omit styles for 'div#i' if centering on page
*/
div#i {
position: relative;
/**
* set any positioning or sizing, just make
* sure that 'height' or 'min-height' is set
*/
height: 99.44%;
}
div#i>div {
/**
* for the outer div of each img, put its upper-
* left corner in the center (50%, 50%) of div#i
*/
position: absolute;
left: 50%;
top: 50%;
}
div#i>div>div {
/**
* the inner div of each img will be the same size
* as the img itself, so these 50% values refer to
* half the img width and height; move the center of
* this inner div to upper-left corner of outer div
*/
margin-left: -50%;
margin-top: -50%;
display: inline-block;
}
div#i>div>div>img {
/**
* this plus the above inline-block style will
* vertically center img within the inner div
* (normally it's baseline-aligned)
*/
vertical-align: middle;
}
</style>
</head>
<body>
<div id="i">
<div>
<div>
<img src="a.png">
</div>
</div>
<div>
<div>
<img src="b.png">
</div>
</div>
<div>
<div>
<img src="c.png">
</div>
</div>
<!--
etc.
-->
</div>
</body>
</html>
/**
*如果以页面为中心，则省略“div#i”的样式
*/
第一分部{
位置：相对位置；
/**
*设置任何位置或大小，只需
*确保设置了“高度”或“最小高度”
*/
身高：99.44%；
}
div#i>div{
/**
*对于每个img的外部div，将其上部-
*第一分部中间的左角（50%，50%）
*/
位置：绝对位置；
左：50%；
最高：50%；
}
div#i>div>div{
/**
*每个img的内部div大小相同
*因为img本身，所以这50%的值指的是
*img宽度和高度的一半；移动img的中心
*这个内分区到外分区的左上角
*/
左边缘：-50%；
利润率最高：-50%；
显示：内联块；
}
div#i>div>div>img{
/**
*这加上上面的内联块样式将
*将img垂直居中放置在内部分区内
*（通常是基线对齐）
*/
垂直对齐：中间对齐；
}
最新版本！没关系，我会将我的版本更改为您答案的版本！呵呵