CSS 响应式圆圈

Question

如何将图标和文本（在图标下方）居中对齐，以便在调整大小时它们保持在矩形 div 内的相同位置？这是我的意思的例子。 Example

Answer 1

.card{
  width: 300px;
  height: 400px;
  border: 1px solid skyblue;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.circle{
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background: green;
}

<div class="card">
  <span class="circle"></span>
</div>

尝试使用display: flex