使用CSS

Question

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

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

到目前为止，我只提出了一个JavaScript解决方案。这是计算孩子相对于其父母的width，然后从left位置减去一半的百分比。然后为height和顶部位置做同样的事情。请参阅片段......

＆＃13;

＆＃13;

//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) + '%';

＆＃13;

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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

要仅使用负百分比值，您需要一个额外的容器，因此父级的大小相同。

static void _Block_assign_default(void *value, void **destptr) {
    *destptr = value;
}
static void (*_Block_assign)(void *value, void **destptr) = _Block_assign_default;

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);
}