How can I center the maximum circle in an arbitrary sized box?

Question

I would like to know a clean and generic way to achieve this using only CSS + HTML. Minimal markup / hackery would be desirable.

The goal is to provide a working example in which:

there is a parent container box that can be any size
there is an inner div element nested that should be the biggest circle possible that fits in the outer box, centered both vertically and horizontally.

This is what I've got so far, it is an ugly approach:

$(function(){
  console.log("this code is  here only to allow resizing the parent box");
  $(".box").resizable().height(150).width(100);
});

.box{
  margin-left:auto;
  margin-right:auto;
  display: flex;
  justify-content: center;  
  align-items: center;  
  position:relative;
  border:2px dashed red;
  min-width:90px;
  min-height:90px;
  margin-top:50px;
}

.dummy{
  max-height:100%;
  max-width:100%;
  object-fit:contain;
  border-radius:500px;
  border:2px dashed blue;
  box-sizing:content-box;
  pointer-events:none;
  background-color:yellow;
}

.circle{
  display:contents;
  position:relative;
}

.circle span{
  position:absolute;
  color:white;
  font-size:30px;
  color:black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">

<h4>No JS involved, but a lot of ugly hackery</h4>
<p>¿any better way to do it?</p>

<div class="box" width="100" height="160">
  <div class="circle">
      <img class="dummy" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAPoAQMAAAB3bUanAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAKpJREFUeNrswYEAAAAAgKD9qRepAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABg9uBAAAAAAADI/7URVFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVWlPTgkAAAAABD0/7UrbAAAAADMAuw/AAGdJWCbAAAAAElFTkSuQmCC
"> 
    <span>:-)</span>
  </div>

</div>


<br/><br/><br/><br/>

Please at least try to solve your assignments by yourself. Then, when you have code to show and it fails, describe how it fails and we might be able (and willing) to help. — connexo, Oct 11 '19 at 22:42
I am not a student, I am a web developer who faced with that question in a real life scenario and couldn't find a clean generic way of solving it. I don't see anything wrong with my question, it is not trivial — Alvaro qInnova, Oct 11 '19 at 23:03
@connexo you were a bit rude. I don't find anything wrong about my question (at least you edited it to make it sound less destructive). I solved it by using a dummy square image with an embedded base-64 source, to set the inner box proportions, but it was not a clean solution; that is why I am asking for different approaches. — Alvaro qInnova, Oct 11 '19 at 23:09
How about using a radial-gradient as background? Would that be sufficient? — Rickard Elimää, Oct 31 '19 at 12:12
Thank you Rickard, actually not, I was more interested in knowing if there is any way to create a fixed aspect ratio children, centered both vertically and horizontally, which size is determined by its parent box... not so interested in the circle shape. Thank you anyway! I think it is not possible using only CSS — Alvaro qInnova, Oct 31 '19 at 14:45

Libra · Answer 1 · 2019-10-11T23:22:45.030

0

HTML

<div id="box">
  <div id="circle">
  </div>
</div>

CSS

#box{
  height: 200px;
  width: 200px;
  background-color: red;
}

#circle{
  height: 100%;
  width: 100%;
  background-color: blue;
  border-radius: 50%;
}

CodePen

edited Oct 11 '19 at 23:22

answered Oct 11 '19 at 22:54

Libra

2,544
1
8
24

Thank you Laif, however it doesn't fit the requirements. if you set your outer box to height:400px; the inner circle is not a circle anymore. – Alvaro qInnova Oct 11 '19 at 22:58
Are you looking for a CSS only answer? this would be quite easy w/ scripting. There are some CSS answers but they do not always work and are not portable. – Libra Oct 11 '19 at 23:12
I just wanted to know if it is possible to achieve it using CSS + HTML only in a clean way. I can do it with JS easily, or with CSS + HTML using a dummy square image, but I was wondering if there is a good way to solve it :-) – Alvaro qInnova Oct 11 '19 at 23:21

How can I center the maximum circle in an arbitrary sized box?

1 Answers1