Как центрировать элемент по центру круга?

Question

[MRcracker]

Есть круг, который сделан на css. Внутри круга расположена иконка fontawesome. Как расположить иконку по центру круга?

Answer 1

[Алексей]

Кругу display: flex; align-items: center; justify-content: center;

Answer 2

[Dymok]

Кругу position: relative, иконке position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);

Answer 3

[profesor08]

Если центрировать иконку при помощи position, top, left, transform, то часто будет получаться мыло. Поэтому лучше использовать что-то другое. Можно на флексах как в примере ниже, если размер неизвестен, можно только position, top: 50%, left: 50%, margin: -[пол высоты иконки] 0 0 -[пол ширины иконки], если размер иконки известен.

.circle {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: red;
}

.circle .icon {
  line-height: 100%;
}