将 div 定位在父 div 的中间，而不是其他同级 div

Question

我有这个 div 结构：

<div id="outer-div">
    <div id="first-div"></div>
    <div id="cell-icon">anFAicon</div>
</div>

和风格：

#outer-div {
  height:80px;
  width:100px;
  border: 1px solid red;
}
#first-div {
  width:50%;
  height:100%;
  border-right: 2px solid #619e38
}
#cell-icon {
  border:1px solid blue;
  position: absolute;
  top: 50%;
}

这将输出：

见这里：https : //codepen.io/neptune01/pen/RZgwvd

我需要的是这个：

我想将 div 单元格图标放在其他 div 上的外部 div 的中间。尝试使用绝对位置但它不起作用，如您所见。

Answer 1

解决方案

#outer-div {
  height:80px;
  width:100px;
  border: 1px solid red;
  position: relative;
}
#first-div {
  width:50%;
  height:100%;
  border-right: 2px solid #619e38
}
#cell-icon {
  border:1px solid blue;
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%, -50%);
  background-color: #fff;
  z-index:1;
}

<div id="outer-div">
    <div id="first-div"></div>
    <div id="cell-icon">anFAicon</div>
</div>

我改变了什么

首先，我添加position: relative到您的#outer-divCSS。这样当您稍后使用绝对定位时，元素被约束在#outer-div容器内，而不是主体内（元素相对于最近的父元素定位，位置值为absolute或relative）。

然后，我简单地添加left: 50%到#cell-icon元件至50％左移动它，然后transform:translate(-50%, -50%)到在div移动到确切的中心。

最后，我添加了 a background-colorof white 和z-indexof 1（如评论部分所建议的）将#cell-icon元素放置在其他两个 div 上方（如图所示）。