15

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.

Improve this question
5
  • You could use the vw or vh unit, if you can proportion it. An example Commented Jan 14, 2016 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). Commented Jan 14, 2016 at 11:53
  • 1
    The answers are exactly the same, padding ratio and viewport units. Simply a dupe...*anything else is just border-radius and layout.* Commented Jan 14, 2016 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. Commented Jan 14, 2016 at 15:52
  • 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") Commented Apr 26, 2016 at 11:56

5 Answers 5

Reset to default
23

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

22

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

Improve this answer

Comments

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

Comments

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

Improve this answer

Comments

0

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>

Improve this answer

Comments