内容居中的响应式圆圈

Question

有没有办法做到以下几点：

 #id {
  border-radius: 100px;
  width: 100px;
  height: 100px;
}

 <div id="circle">
  <h3>Hello</h3>
</div>

圆形 div 文本垂直和水平居中。同时保持圈子响应。

By that I mean having a width of say 50% of the containing div , at the same time keeping the height percentage equal as to做一个圆圈。

并将静态 100px 更改为百分比，使圆变成椭圆形。

原文由 user818700 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

视口单位

如果您使用相同的视口单元（ vw 或 vh ），那么您应该得到一个响应圈。

100 的视口单位将是宽度或高度的 100%。因此，它与使用百分比非常相似。

 div {
  width: 10vw;
  height: 10vw;
  border-radius: 50%;
  background: blue;
}

 <div></div>

原文由 Stewartside 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用以下方法制作一个 内容居中的圆圈：

• padding-bottom 根据圆的宽度保持圆的纵横比（ 更多信息在这里）
• transform:translate(-50%,-50%); 绝对定位使内容在圆圈中垂直和水平居中（参见 此答案 中的方法 1）

 .circle{
  position:relative;
  width:50%;
  padding-bottom:50%;
  background:gold;
  border-radius:50%;
}
.circle h3{
  position:absolute;
  top:50%; left:50%;
  transform: translate(-50%, -50%);
  margin:0;
}

 <div class="circle">
  <h3>Hello</h3>
</div>

请注意，您需要将供应商前缀添加到转换属性以最大化浏览器支持（有关更多信息，请参阅 canIUse ）。

原文由 web-tiki 发布，翻译遵循 CC BY-SA 3.0 许可协议