响应中心内容的圈子

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%.因此它与使用百分比非常相似.

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

<div></div>

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>

请注意,您需要在transform属性中添加供应商前缀以最大化浏览器支持(有关详细信息,请参阅canIUse).

Answer 3

.circle {
  width: 100%;
  border-radius: 50%;
  color: white;
  background-color: blue;
  text-align: center;
  aspect-ratio: 1 / 1;
}