响应中心内容的圈子 [英] Responsive circle with centered content

问题描述

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

Is there a way to make the following:

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

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

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

我的意思是说宽度说 50％ div 的$ c>，同时保持 height 百分比等于制作一个圆圈。

A round div with the text centered vertically and horizontally. At the same time keeping the circle responsive.
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 make a circle.

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

And changing the static 100px to pertentages makes the circle oval.

推荐答案

视口单元

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

Viewport Units

If you use the same viewport unit (either vw or vh) then you should get a responsive circle.

<$>的视口单位c $ c> 100 将是宽度或高度的100％。因此它与使用百分比非常相似。

A viewport unit of 100 would be 100% of either the width or height. Therefore it is very similar to using a percentage.

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

<div></div>

这篇关于响应中心内容的圈子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！