Div does not center inside Div

Question

I am centering a number inside of a circle. I am trying to center that number in a "card"

.numberCircle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#inner {
  width: 50%;
  margin: 0 auto;
}

<div class="card">
  <div id="@(ViewBag.Id)" class="card-body" style="min-height: 495px;">
    <div style="text-align:center">
      <h2>My Number</h2>
    </div>
    <div id="inner">
      <div class="numberCircle" style="background:green;font-size:32px">2.98</div>
    </div>
  </div>
</div>

The heading centers but the number does not:

What have you done to try? I only see centering markup on the heading container. Maybe put your circle inside that. — isherwood, Sep 30 '21 at 15:22
Protip: for all our sakes, don't use inline styles. They're a royal pain. Put it in your CSS. — isherwood, Sep 30 '21 at 15:24
@isherwood - for my sake, I have to use an inline style here because the "color" actually will change based on the number and will come from the Model. If you know how to do that without using an inline style, please share. — Rani Radcliff, Sep 30 '21 at 15:26
To answer what have I tried, I created the "inner" class to try to center, but it does not move all the way to the center. — Rani Radcliff, Sep 30 '21 at 15:27

score 0 · Accepted Answer · answered Sep 30 '21 at 15:24

Just add margin: 0 auto; to .numberCircle. That will center it inside the inner div.

.numberCircle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

#inner {
  width: 50%;
  margin: 0 auto;
}

<div class="card">
  <div id="@(ViewBag.Id)" class="card-body" style="min-height: 495px;">
    <div style="text-align:center">
      <h2>My Number</h2>
    </div>
    <div id="inner">
      <div class="numberCircle" style="background:green;font-size:32px">2.98</div>
    </div>
  </div>
</div>

Div does not center inside Div

1 Answers1