Нюансы CSS. Позиционирование элемента по центру другого.

Допустим у нас есть кружок - <div class="circle"></div> .

А внутри него стрелочка - <div class="arrow-in-circle">></div>

А в общем вот так:

<div class="circle">

<div class="arrow-in-circle">></div>

</div>

И чтобы сделать как на картинке

задаём стили:

.circle{
position: relative;
border-radius: 40px;
width: 40px;
height: 40px;
align-items: center;
background-color: green;

}

.arrow-in-circle {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: white;
}