内容居中的响应式圆圈答案

【问题标题】：Responsive circle with centered content内容居中的响应式圆圈
【发布时间】：2016-04-19 17:12:27
【问题描述】：

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

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

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

一个圆形的div，文本居中垂直和水平。同时保持圈子的响应。
我的意思是说包含div 的width 的50%，同时保持height 的百分比等于形成一个圆圈。

将静态 100px 更改为 pertentages 会使圆变成椭圆形。

【问题讨论】：

你可以使用vw 或vh 单位，如果你可以比例的话。 An example
@Paulie_D 我不认为这个问题可以作为纵横比问题的欺骗而结束。制作圆圈的方法是相同的，但它似乎不足以成为一个骗子（内容居中以及它是一个圆圈的事实）。
答案完全相同，填充率和视口单位。 只是一个骗局...*其他任何东西都只是边框半径和布局。*
@Paulie_D 我相信纵横比与“其他”部分相结合，使这个问题值得保留。我认为寻找内容居中的响应式圈子的人不会在纵横比问题或仅以内容居中的内容中找到合适的答案。
2 年后，这里有一个 answer，它展示了一个适应内容长度的响应圈（请参阅“根据内容调整大小 - 改进”下的最后一个链接）

标签： html css responsive-design css-shapes

【解决方案1】：

视口单位

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

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

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

&lt;div&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

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

padding-bottom 根据圆的宽度保持圆的纵横比 (more info here)
transform:translate(-50%,-50%); 使用绝对定位使内容在圆圈中垂直和水平居中（参见this answer 中的方法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 了解更多信息）。

【讨论】：

【解决方案3】：

CSS 对此有 aspect-ratio 属性，它适用于元素的宽度和高度。

react native 的更多信息：https://reactnative.dev/docs/layout-props#aspectratio

【讨论】：