如何在任意大小的框中居中最大圆？[复制]

Question

我想知道一种干净和通用的方法来实现这一点，只使用CSS超文本标记语言。最小的标记/黑客攻击是可取的。

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

• 有一个任意大小的父容器盒

到目前为止，这是一种丑陋的方法：

$(function(){
  console.log("this code is  here only to allow resizing the parent box");
  $(".box").resizable().height(150).width(100);
});

.box{
  margin-left:auto;
  margin-right:auto;
  display: flex;
  justify-content: center;  
  align-items: center;  
  position:relative;
  border:2px dashed red;
  min-width:90px;
  min-height:90px;
  margin-top:50px;
}

.dummy{
  max-height:100%;
  max-width:100%;
  object-fit:contain;
  border-radius:500px;
  border:2px dashed blue;
  box-sizing:content-box;
  pointer-events:none;
  background-color:yellow;
}

.circle{
  display:contents;
  position:relative;
}

.circle span{
  position:absolute;
  color:white;
  font-size:30px;
  color:black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">

<h4>No JS involved, but a lot of ugly hackery</h4>
<p>¿any better way to do it?</p>

<div class="box" width="100" height="160">
  <div class="circle">
      <img class="dummy" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAPoAQMAAAB3bUanAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAKpJREFUeNrswYEAAAAAgKD9qRepAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABg9uBAAAAAAADI/7URVFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVWlPTgkAAAAABD0/7UrbAAAAADMAuw/AAGdJWCbAAAAAElFTkSuQmCC
"> 
    <span>:-)</span>
  </div>

</div>


<br/><br/><br/><br/>

Answer 1

HTML

<div id="box">
  <div id="circle">
  </div>
</div>

CSS

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

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

代码笔