使一个元素相对于另一个元素居中

Question

我有一个元素应该与另一个元素水平居中。居中元素的 CSS 是这样的（我删除了不必要的代码）：

#center-element{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
}

我必须使用 vanilla JS 来做到这一点。我试过了：

var targetPos = target.getBoundingClientRect();
centerDiv.style.top = (targetPos.top + targetPos.height) + "px";
centerDiv.style.left = (targetPos.left + (targetPos.width  / 2)) + "px";

但是那是关闭的。有什么想法吗？

JSFiddle

Answer 1

您可以使用 flexbox 来完成。您可以将 div 包装在容器 div 中，然后在该容器上应用 display:flex;。

#target {
  background-color: lightblue;
  text-align: center;
  width: 100%;
}
#centerDiv {
  /* display: flex;
  flex-direction: column;
  align-items: stretch;
  position: absolute; */
  text-align:center;
}
.container{
  display:flex;
  width:75%;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

<div class="container"><div id="target">
  This is the div
</div>
<div id="centerDiv">
  This is supposed to be horizontally centered <em><br/>to the div element above</em>
</div>
</div>

Answer 2

//Somehow center the div here
var target = document.getElementById("target");
var centerDiv = document.getElementById("centerDiv");
var targetPos = target.getBoundingClientRect();
centerDiv.style.top = targetPos.bottom + "px";
centerDiv.style.left = targetPos.left + (target.offsetWidth - centerDiv.offsetWidth) / 2 + "px";

#target {
  background-color: lightblue;
  text-align: center;
  width: 75%;
}
#centerDiv {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: absolute;
}

<div id="target">
  This is the div
</div>
<div id="centerDiv">
  This is supposed to be horizontally centered <em>to the div element above</em>
</div>

使一个元素相对于另一个元素居中

Centering an Element Relative to Another Element

html

javascript

css

centering

flexbox