align the child element middle inside the parent element

Question

I am new to this. I need to align the circle in middle of the rectangle both vertical and horizontal.

My CSS Code :

.outerRectangle {
    height: 100px;
    width: 100px;
    background-color: #bbb;
    display: inline-block;
    text-align: center;
    position:relative;
  }

  .innerCircle {
    height: 25px;
    width: 25px;
    background-color:DodgerBlue;
    border-radius: 100%;
    display: inline-block;
    vertical-align: middle;    
  }

<div>
    <rect class="outerRectangle">
       <circle class="innerCircle"></circle>
    </rect>   
</div>

My output:

Expected :

someone correct me. Thanks in advance.

Answer 1

here use this, it will help!!!

.outerRectangle {
    height: 100px;
    width: 100px;
    background-color: #bbb;
    display: flex;
    align-items: center;
    justify-content: center;
  }

Answer 2

Here you go with a solution using position absolute

 .outerRectangle { height: 100px; width: 100px; background-color: #bbb; display: inline-block; text-align: center; position: relative; } .innerCircle { height: 25px; width: 25px; background-color:DodgerBlue; border-radius: 100%; display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate( -50%, -50%); }

 <div> <rect class="outerRectangle"> <circle class="innerCircle"></circle> </rect> </div>

Here you go with a solution using display: flex

 .outerRectangle { height: 100px; width: 100px; background-color: #bbb; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center } .innerCircle { height: 25px; width: 25px; background-color:DodgerBlue; border-radius: 100%; display: inline-block; vertical-align: middle; }

 <div> <rect class="outerRectangle"> <circle class="innerCircle"></circle> </rect> </div>