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

【问题标题】：Center absolutely positioned element over own position properties with CSS使用 CSS 将绝对定位的元素置于自己的位置属性之上
【发布时间】：2016-05-03 11:58:10
【问题描述】：

如果可能的话，我想使用 CSS 将绝对定位的 div（或其他 html 元素）置于其自己的 top 和 left 属性的中心。默认情况下，绝对定位的元素会将其左上角与 top 和 left 属性对齐。见下图，灰框为相对定位的容器，红点为页面蓝色div的CSS位置（top: 0; left:0;）：

我想知道最好的选择是将蓝色 div 置于其自身位置的中心，如下面页面上的鲑鱼色 div 所示。如果可能的话，我想要百分比而不是像素的位置。

到目前为止，我只提出了一个 JavaScript 解决方案。这是计算子代相对于其父代的width，然后从left 位置减去该百分比的一半。然后对height 和顶部位置执行相同的操作。见sn-p...

//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>

【问题讨论】：

标签： css

【解决方案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>

【讨论】：

完美！ @Nenad Vracar，只是好奇，不认为有办法，但是没有 CSS3 有可能吗？
@tnschmidt 如果它有一个已知的大小，那么负边距就可以了 :) margin-top:-50px;margin-left:-50px或只是负坐标：left:-50px;top:-50px;
@GCyrillus 是 jsfiddle.net/Lg0wyt9u/738 或只是负位置 jsfiddle.net/Lg0wyt9u/739 但它不是 OP 想要的百分比。
是的，%不行，需要父母尺码参考

【解决方案2】：

要仅使用负百分比值，您需要一个额外的容器，以便孩子和父母的大小相同。

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>

【讨论】：