Центрирование элемента без родителя?

Question

[Елена]

К примеру такой вариант:

<div class="canvas">
    <div class="circle-container">
      <div class="circle" data-circle="1"></div>
    </div>
  </div>
  <style>
    .canvas {
      width: 50rem;
      height: 50rem;
      position: relative;
    }
    .circle-container {
      position: absolute;
      top: 10rem;
      left: 8rem;
      width: 4rem;
      height: 4rem;
      background-color: bisque;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    [data-circle="1"] {
      width: 4rem;
      height: 4rem;
      border-radius: 50%;
      background-color: blueviolet;
    }
    [data-circle="2"] {
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
      background-color: brown;
    }
  </style>

мне бы хотелось избавится от circle-container, чтоб можно было просто задать координаты например:

position: absolute;
top: 10rem;
left: 10rem;

и каждый круг вставал своим центром на эту координату

Answer 1

[Stalker_RED]

<div class="circle one"></div>
<div class="circle two"></div>
<div class="circle three"></div>
<style>
.circle {
  top: 200px;
  left: 200px; /* вот он, ваш центр */

  transform: translate(-50%, -50%); /* а вот эта магия центрирует */
  position: absolute;
  border-radius: 50%;
}

.one {
  background: red;
  width: 100px;
  height: 100px;
}

.two {
  background: cyan;
  width: 80px;
  height: 80px;
}

.three {
  background: yellow;
  width: 60px;
  height: 60px;
}
</style>

Comments

[Елена]

Спасибо. Всегда думала что translate(-50%, -50%) высчитывается относительно родителя

[Stalker_RED]

Елена, заодно откройте для себя transform-origin - мощная штука.

Answer 2

[Noder SS]

left:calc(50vw - ширинаpx);
top: calc(50vh - высотаpx)