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.

You could use the `vw` or `vh` unit, if you can proportion it. [An example](https://jsfiddle.net/b5ye1ar1/) — insertusernamehere, Jan 14 '16 at 11:39
@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). — web-tiki, Jan 14 '16 at 11:53
The answers are exactly the same, padding ratio and viewport units. **Simply a dupe**...*anything else is just border-radius and layout.* — Paulie_D, Jan 14 '16 at 11:54
@Paulie_D 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. — web-tiki, Jan 14 '16 at 15:52
After 2 years, here is one [answer](http://stackoverflow.com/a/9359039/607874) that demonstrates a responsive circle that adapts to content length (see the last link under "Resize with content - Improvement") — Jose Rui Santos, Apr 26 '16 at 11:56

score 22 · Answer 1 · edited May 23 '17 at 12:16

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

score 21 · Accepted Answer · answered Jan 14 '16 at 11:43

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>

score 3 · Answer 3 · answered Feb 28 '22 at 12:42

3

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

answered Feb 28 '22 at 12:42

Miros

527
1
3
11

score 2 · Answer 4 · answered Feb 04 '22 at 13:23

2

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

answered Feb 04 '22 at 13:23

dimpiax

12,093
5
62
45

Fisal Assubaieye · Answer 5 · 2023-01-23T11:17:44.303

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>

Responsive circle with centered content

5 Answers5

Viewport Units

Linked

Related