Question

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

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

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

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

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

Answer 1

视口单元

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

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

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

Answer 2

您可以使用以下内容制作带有居中内容的圈

System.Runtime.GCSettings.LatencyMode = GCLatencyMode.SustainedLowLatency;根据宽度（more info here）
padding-bottom具有绝对定位，可以将内容垂直和水平居中放置在圆圈中（参见this answer中的方法1）

＆＃13;

transform:translate(-50%,-50%);

＆＃13;

.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;
}

＆＃13;

请注意，您需要在transform属性中添加供应商前缀以最大限度地提高浏览器支持（有关详情，请参阅canIUse）。

响应中心内容的圈子

2 个答案:

视口单元