Pozycjonowanie elementu poprzez odwołanie do jego środka

Question

Czy istnieje sposób na odwołanie się do centrum jakiegoś elementu, np diva? Chciałbym rozłożyć divy na okręgu i najłatwiej by było mi to zrobić jakbym mógł wskazać gdzie mają leżeć ich środki.

Comments

Jeżeli masz element pozycjonowany absolutnie względem rodzica i znasz jego wymiary to chyba nie ma problemu ustawić go według dowolnej pozycji?

---

Nie chodzi o problem, tylko o ułatwienie sobie życia.

---

<div class="circle">
	<div class="outside left"></div>
	<div class="outside between-tl"></div>
	<div class="outside between-tr"></div>
	<div class="outside right"></div>
	<div class="outside top"></div>
	<div class="outside between-bl"></div>
	<div class="outside between-br"></div>
	<div class="outside bottom"></div>
</div>

.circle{
	width: 300px;
	height: 300px;
	border-radius: 100%;
	border: 1px solid red;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
	padding: 18px;
}
.outside{
	width: 50px;
	height: 50px;
	border-radius: 100%;
	position: absolute;
	border: 1px solid green;
	background-color: red;
}

.left{
	left: -25px;
	top: calc(50% - 25px);
}
.between-tl{
	left: 25px;
	top: 25px;
}
.top{
	left: calc(50% - 25px);
	top: -25px;
}
.between-tr{
	right: 25px;
	top: 25px;
}
.right{
	right: -25px;
	top: calc(50% - 25px);
}
.between-br{
	right: 25px;
	bottom: 25px;
}

.bottom{
	left: calc(50% - 25px);
	bottom: -25px;
}
.between-bl{
	left: 25px;
	bottom: 25px;
}

 

---

Nie wiem czy do końca w temacie, ale według Mnie ciekawa wizualizacja: 

Regular polygon with [in|circum] circle (SVG + CSS + Vanilla JS)

 

BTW: Placing Items on a Circle
          Positioning divs in a circle using JavaScript

---

@pablop76, Dzięki.

Answer 1

Jedyne, co mi przychodzi do głowy, to zrobienie tych okręgów o wielkości samego diva, nadanie im transform-origin: center i następnie zeskalowanie ich i rozmieszczenie transformacjami. PoC: https://codepen.io/Comandeer/pen/vYxveEM

Trzeba tylko uważać, bo po przeskalowaniu trzeba wziąć pod uwagę, że z punktu widzenia kółka całość w przykładzie ma teraz 200%x200%, więc przesunięcia trzeba pomnożyć przez 2. Analogicznie będzie przy innym współczynniku skalowania.