Search code examples
htmlcssresponsive-designcss-shapes

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>

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.

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

Solution

  • Viewport Units

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

    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>