Responsive circle with centered content

Question

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.

Screen

You could use the vw or vh unit, if you can proportion it. An example – Sophistication

@Paulie_D I don't think this question can be closed as a dupe of the aspect ratio question. The approach to make the circle is the same but it doesn't seem close enough to be a dupe (content centering and the fact it is a circle). – Typewriter

The answers are exactly the same, padding ratio and viewport units. Simply a dupe...*anything else is just border-radius and layout.* – Keciakeck

@Keciakeck it is the aspect ratio combined with the "anything else" part that I believe makes this question worth keeping. I don't think someone looking for a responsive circle with centered content would find a suitable answer in the aspect ratio question or in the content centering one alone. – Typewriter

After 2 years, here is one answer that demonstrates a responsive circle that adapts to content length (see the last link under "Resize with content - Improvement") – Drip

Answer 1

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>

Sulfonate

Answer 2

You can make a circle with centered content with:

• padding-bottom to keep the aspect ratio of the circle according to it's width (more info here)
• transform:translate(-50%,-50%); with absolute positioning to center the content verticaly and horizontaly in the circle (see approach 1 in this answer)

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

Note that you will need to add vendor prefixes to the transform property to maximize browser support (see canIUse for more info).

Typewriter

Answer 3

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

Pisarik

Answer 4

CSS has the aspect-ratio property for this, which applies on width and height of the element.

More for web: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

More for react native: https://reactnative.dev/docs/layout-props#aspectratio

Rutaceous

Answer 5

The @media rule is used in media queries to apply different styles/size/width/height for different media types/devices.

Media queries can be used to check many things, such as:

width and height of the viewport width and height of the device orientation (is the tablet/phone in landscape or portrait mode?) resolution

See below example:

    /* Mobile & small screen size devices*/
    @media only screen and (max-width: 600px) {
            .circle {
            width: 210px!important;
            height: 210px!important;
        }
    }

    /* Desktop, Laptop, Tablet */
    @media only screen and (min-width: 650px) {
        .circle {
            width: 356px;
            height: 356px;
        }
    }

    .circle {
        margin: auto;
        width: 356px;
        height: 356px;
        opacity: 1;
        border-radius: 50%;
        background-color: gray;
    }

<div class="circle"></div>

Rania