Центр абсолютно позиционированного элемента над собственными свойствами позиции с помощью CSS

Question

Я хотел бы центрировать абсолютно позиционированный div (или другой элемент html) над его собственным верхним и левым свойством с CSS, если это возможно. По умолчанию абсолютно позиционированный элемент выравнивает его верхний левый угол с верхним и левым свойством. Смотрите схему ниже, где серая коробка является позиционирован относительно контейнера и красная точка является позиция CSS (top: 0; left:0;) синего DIV на странице:

Я хотел бы знать, что лучший вариант было бы сосредоточить синий div над его собственной позицией, как в цветном div лосося на странице ниже. Если возможно, мне нужна позиция в процентах, а не в пикселях.

До сих пор я только придумал решение для JavaScript. Это вычисляет width ребенка относительно его родителя, а затем вычитает половину этого процента из позиции left. Затем сделайте то же самое для height и верхнего положения. Смотрите фрагмент ...

//put elements in variables 
 
var container = document.getElementById('main-box'); 
 
var div = document.getElementById('center-on-pos'); 
 

 
//get top and left in div position percentages relative to container 
 
var div_top = (div.offsetTop/container.offsetHeight) * 100; 
 
var div_left = (div.offsetLeft/container.offsetWidth) * 100; 
 

 
//calculate how much we need to shift 
 
var offset_top_pos = ((div.offsetWidth/container.offsetWidth) * 100)/2; 
 
var offset_left_pos = ((div.offsetHeight/container.offsetHeight) * 100)/2; 
 

 
//shift div 
 
div.style.top = (div_top - offset_top_pos) + '%'; 
 
div.style.left = (div_left - offset_left_pos) + '%';

body{ padding:85px; } 
 

 
.container{ 
 
    background-color:rgba(0,0,0,.2); 
 
    width:500px; 
 
    height:500px; 
 
    position:relative; 
 
} 
 

 
.container > div{ 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    width:100px; 
 
    height:100px; 
 
    background-color:rgba(255,0,0,.5); 
 
}

<div id="main-box" class="container"> 
 
    <div id="center-on-pos"></div> 
 
</div>

Answer 1

Вы можете использовать transform: translate(-50%, -50%)

body { 
 
    padding: 85px; 
 
} 
 
.container { 
 
    background-color: rgba(0, 0, 0, .2); 
 
    width: 500px; 
 
    height: 500px; 
 
    position: relative; 
 
} 
 
.container > div { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: rgba(255, 0, 0, .5); 
 
    transform: translate(-50%, -50%); 
 
}

<div id="main-box" class="container"> 
 
    <div id="center-on-pos"></div> 
 
</div>

Answer 2

Чтобы использовать только отрицательное значение в процентах, вам нужен дополнительный контейнер поэтому ребенку parent имеют одинаковый размер.

body { 
 
    padding: 85px; 
 
} 
 
.container { 
 
    background-color: rgba(0, 0, 0, .2); 
 
    width: 400px; 
 
    height: 200px; 
 
    position: relative; 
 
} 
 
.container > div { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    } 
 
.abst>div { 
 
    margin:-50%; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: rgba(255, 0, 0, .5); 
 
}

<div id="main-box" class="container"> 
 
    <div class="abst"><div id="center-on-pos"></div></div> 
 
</div>