Html 如何使任意大小的框中的最大圆居中？

我想知道一个干净和通用的方法来实现这一点，只使用CSS+HTML。尽量减少标记/黑客攻击

目标是提供一个工作示例，其中：

• 有一个可以是任意大小的父容器框
• 嵌套的内部div元素应该是最大的 圆可能适合外盒，垂直居中 水平的

到目前为止，这是我得到的，这是一个丑陋的方法：

$（函数（）{
log（“此代码仅允许调整父框的大小”）；
$（“.box”）.resizable（）.高度（150）.宽度（100）；
});
.box{
左边距：自动；
右边距：自动；
显示器：flex；
证明内容：中心；
对齐项目：居中；
位置：相对位置；
边框：2个红色虚线；
最小宽度：90px；
最小高度：90px；
边缘顶部：50px；
}
.笨蛋{
最大高度：100%；
最大宽度：100%；
对象匹配：包含；
边界半径：500px；
边框：2个蓝色虚线；
框大小：内容框；
指针事件：无；
背景颜色：黄色；
}
.圆圈{
显示：内容；
位置：相对位置；
}
.圆跨度{
位置：绝对位置；
颜色：白色；
字体大小：30px；
颜色：黑色；
}

没有涉及JS，但是有很多丑陋的黑客
有更好的方法吗

:-)




HTML

请至少试着自己解决作业。然后，当你有代码要显示，但它失败了，请描述它是如何失败的，我们可能会（并且愿意）提供帮助。我不是一名学生，我是一名网络开发人员，在现实生活中遇到了这个问题，但找不到一个干净的通用方法来解决它。我看不出我的问题有什么问题，它不是trivial@connexo你有点粗鲁。我没有发现我的问题有任何错误（至少你对它进行了编辑，使它听起来不那么具有破坏性）。我通过使用带有嵌入式base-64源的虚拟方形图像来设置内框比例来解决这个问题，但这不是一个干净的解决方案；这就是为什么我要求不同的方法。使用径向梯度作为背景怎么样？这就足够了吗？谢谢Rickard，事实上没有，我更感兴趣的是知道是否有任何方法可以创建一个固定的纵横比子对象，垂直和水平居中，其大小由其父框决定。。。对圆形不太感兴趣。无论如何谢谢你！我认为仅使用CSSThank you Laif是不可能的，但是它不符合要求。如果您将外盒设置为高度：400px；内圈不再是一个圆圈了。你是在寻找一个CSS唯一的答案吗？这将是非常容易的w/脚本。有一些CSS的答案，但它们并不总是有效的，也不可移植。我只是想知道，是否有可能实现它使用CSS+HTML只在一个干净的方式。我可以用JS轻松地完成，或者用CSS+HTML使用一个虚拟的正方形图像，但是我想知道是否有一个好方法来解决它：-）
<div id="box">
  <div id="circle">
  </div>
</div>

#box{
  height: 200px;
  width: 200px;
  background-color: red;
}

#circle{
  height: 100%;
  width: 100%;
  background-color: blue;
  border-radius: 50%;
}