Как выравнять круг в кругу?

Question

[Zombie42679]

Можно ли как-то без флексбокса и css grid выравнять круг внутри круга, не используя тот способ, что ниже ? И почему иногда в хроме ровно смотрится, а в мазиле на 1-2 пикселя мимо ?

https://codepen.io/anon/pen/wryXbp

Answer 1

[maxfox]

.circle {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 1px solid #000;
}

.low-circle {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 1px solid red;
  margin: 5px;
}

Обратите внимание, что размер внутреннего круга изменен, везде должны получаться целые числа, иначе при округлении все сместится на 1px.
Т.е. должно быть a + 2*border + 2*margin = b, где a - размер внутреннего круга, а b - внешнего.

Comments

[Zombie42679]

Не совсем понял вашу формулу) В данном примере какие расчеты получатся?

а = 2 * 1 + 2 * ? = 5 ???

P.S. Но поменяв на margin вместо top ситуация улучшилась и в мазиле и в хроме идентично)

[maxfox]

Zombie42679, 62 + 2 * 5 + 2* 1 = 74
Приведенный мной код у меня лично работает.

[Zombie42679]

maxfox, Понял, спасибо большое)