CODEWITHSUNDEEP
cssvertical-alignmentcenteringalignment
D4A60N
D4A60N

Reputation: 187

How to center the center circle?

How to center the center circle (CSS only)?   [Assume latest CSS3 browser support.]

Must maintain v/h centering when parent w/h changes dynamically.

Would the experimental CSS Box Model spec help here?

Thanks.

http://jsfiddle.net/dragontheory/VdJFa/5/

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

.parent         {display: table; 
                margin: 50px auto;
                background: lightgray;
                height: 100px;
                width: 100px;}

.middle         {display: table-cell; 
                vertical-align: middle;}

.circle         {margin: auto;
                border: solid 10px blue;
                border-radius: 50%;
                opacity: 0.3;
                width: 50px;
                height: 50px;}

.circle .circle {width: 15px;
                height: 15px;}

Upvotes: 3

Views: 40842

Answers (4)

Gerard
Gerard

Reputation: 15786

You can make use of the place-items of grid. The outer circle is defines as a grid here.

.parent {
  display: table;
  margin: 50px auto;
  background: lightgray;
  height: 100px;
  width: 100px;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.circle {
  margin: auto;
  border: solid 10px blue;
  border-radius: 50%;
  opacity: 0.3;
  width: 50px;
  height: 50px;
  /* Two lines below added */
  display: grid;
  place-items: center;
}

.circle .circle {
  width: 15px;
  height: 15px;
}
<div class="parent">
  <div class="middle">
    <div class="circle">
      <div class="circle"></div>
    </div>
  </div>
</div>

Upvotes: 0

insertusernamehere
insertusernamehere

Reputation: 23580

To center the small circle within the big one simply use this on .circle .circle:

margin-top: 7px;

You align the inner circle horizontally using margin: auto. To get this thing vertically centered calculate the top margin as the size of the outer circle is fixed too. Its basically like this:

( outer circle (height) - inner circle (height + 2 x border) ) / 2
( 50 - 15 + 10 + 10 ) / 2 = 7.5px

Try before buy

First answer

Solves to center the small circle within the big one even if the big one gets bigger

If the the size of parent increases, the big circle should scale and the small one should stay small and in the middle. Is that correct? Then this could work - try to change the parent's width:

Demo

[Try before buy](http://jsfiddle.net/UhBLC/]

HTML

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

CSS

.parent{
    display: table; 
    margin: 50px auto;
    background: lightgray;
    height: 200px;
    width: 200px;
}

.circle {    
    display: table-cell;
    vertical-align: middle;
    background: blue;
    border-radius: 50%;
    opacity: 0.3;
    width: 100%;
    height: 100%;
}

.tiny_circle {
    margin: auto;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    background: red;
}

Upvotes: 1

Manish Mishra
Manish Mishra

Reputation: 12375

You need to give your middle container, appropriate padding,It will help bringing the content to the center.

You can achieve the same by giving a left i.e. making your .middle as: 

.middle {
    vertical-align: middle;
    text-align:center;
    left:10%;
    position:relative; /*makes left effective*/
    display:table-cell;
}

Also, you have to give your child div.circle a specific width and height combined with border-radius to align it and to give it a shape of circle.

And finally you need to play with the margin of the inner circle to align it.

see this fiddle

Upvotes: 3

TimeWasterNL
TimeWasterNL

Reputation: 102

It isn't the perfect solution, but it works for me. The centering tags that SHOULD be used didn't change anything here, so I hope anyone will come with a better solution.

.circle .circle{
    width: 15px;
    height: 15px;
    margin-top: 15%;
}

Upvotes: 1

Related Questions