выровнять середину дочернего элемента внутри родительского элемента

Question

Я новичок в этом. Мне нужно выровнять круг в середине прямоугольника как по вертикали, так и по горизонтали.

My CSS Код :

.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 выход:

Ожидаемый:

кто-то поправит меня. Заранее спасибо.

Answer 1

Здесь вы go с помощью решения 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>

Здесь вы go с решением, используя 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>

Answer 2

вот используйте это, это поможет !!!

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