使用CSS将绝对定位元素居中于自己的位置属性之上

如果可能的话，我想用CSS将一个绝对定位的div（或其他html元素）放在它自己的top和left属性的中心。默认情况下，绝对定位的元素将其左上角与top and left属性对齐。请参见下图，其中灰框是相对定位的容器，红点是页面上蓝色div的CSS位置（

top:0；left:0；

）：

我想知道最好的选择是将蓝色的div放在它自己的位置上，就像下面页面上的三文鱼色div一样。 如果可能的话，我想在百分比，而不是像素的位置

到目前为止，我只提出了一个JavaScript解决方案。这就是计算子对象相对于其父对象的

宽度，然后从
左侧位置减去该百分比的一半。然后对高度和顶部位置执行相同的操作。请参阅代码段


//将元素放入变量中
var container=document.getElementById（'main-box'）；
var div=document.getElementById（'center-on-pos'）；
//获取相对于容器的顶部和左侧div位置百分比
var div_top=（div.offsetTop/容器offsetHeight）*100；
var div_left=（div.offsetLeft/container.offsetWidth）*100；
//计算我们需要转移多少
var offset_top_pos=（（div.offsetWidth/container.offsetWidth）*100）/2；
var offset_left_pos=（（div.offsetHeight/container.offsetHeight）*100）/2；
//值班室
div.style.top=（div_top-offset_top_pos）+'%；
div.style.left=（div_left-offset_left_pos）+'%
body{padding:85px；}
.集装箱{
背景色：rgba（0,0,0,2）；
宽度：500px；
高度：500px；
位置：相对位置；
}
.container>div{
位置：绝对位置；
排名：0；
左：0；
宽度：100px；
高度：100px；
背景色：rgba（255,0,0,5）；
}
您可以使用
transform:translate（-50%，-50%）


正文{
填充：85px；
}
.集装箱{
背景色：rgba（0,0,0,2）；
宽度：500px；
高度：500px；
位置：相对位置；
}
.container>div{
位置：绝对位置；
排名：0；
左：0；
宽度：100px；
高度：100px；
背景色：rgba（255,0,0,5）；
转换：翻译（-50%，-50%）；
}
要仅使用负的百分比值，您需要一个额外的容器，以便子容器和父容器大小相同


正文{
填充：85px；
}
.集装箱{
背景色：rgba（0,0,0,2）；
宽度：400px；
高度：200px；
位置：相对位置；
}
.container>div{
位置：绝对位置；
排名：0；
左：0；
}
.abs>div{
利润率：-50%；
宽度：100px；
高度：100px；
背景色：rgba（255,0,0,5）；
}

完美@Nenad Vracar，只是好奇，不认为有什么办法，但是没有CSS3有可能吗？@tnschmidt如果它有一个已知的大小，那么负边距就可以了：）
margin top:-50px；左边距：-50px
或只是负坐标：
左边：-50px；顶部：-50px
@GCyrillus是或只是消极的立场，但它的百分比不是OP想要的。是的，%不会，它以父母的大小作为参考