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