使用百分比而不是绝对值将绝对div置于其父对象的中心

Question

This，this和this问题相似，但没有帮助。

目标是使用百分比而不是绝对值将元素居于其父元素下。这样，如果尺寸改变，位置值就不需要改变。

下面的hover元素位于outer的中心，但是定位所需的绝对值取决于hover和outer的大小。如果任何一个改变，则位置值必须改变。

可以通过百分比实现在父项下居中吗？

Codepen：https://codepen.io/anon/pen/dadjpg

<div id="outer">
  <div id="hover"></div>
</div>

#outer {
  width: 200px;
  height: 200px;
  background: blue;
  position: relative;
}

#hover {
  width: 50px;
  height: 50px;
  background: yellow;
  position: absolute;
  margin: auto;
  left: 75px;
  bottom: -50px;
}

Answer 1

您也可以使用top:100%; left:0px; right:0px; margin:0px auto;

#outer {
  width: 200px;
  height: 200px;
  background: blue;
  position: relative;
}

#hover {
  width: 50px;
  height: 50px;
  background: yellow;
  position: absolute;
  left:0px;
  right:0px;
  top:100%;
  margin:0px auto;
}

<div id="outer">
  <div id="hover"></div>
</div>

Answer 2

您可以使用top:100%将元素移到底部，然后将left:50%与translateX(-50%)组合在一起居中：

#outer {
  width: 200px;
  height: 200px;
  background: blue;
  position: relative;
}

#hover {
  width: 50px;
  height: 50px;
  background: yellow;
  position: absolute;
  left:50%;
  transform:translateX(-50%);
  top:100%;
}

<div id="outer">
  <div id="hover"></div>
</div>

考虑bottom:0的相同逻辑

#outer {
  width: 200px;
  height: 200px;
  background: blue;
  position: relative;
}

#hover {
  width: 50px;
  height: 50px;
  background: yellow;
  position: absolute;
  bottom:0;
  left:50%;
  transform:translate(-50%,100%);
}

<div id="outer">
  <div id="hover"></div>
</div>

另一个想法是考虑将flexbox放在元素内部居中，然后平移以将元素置于外部：

#outer {
  width: 200px;
  height: 200px;
  background: blue;
  position: relative;
  display:flex;
}

#hover {
  width: 50px;
  height: 50px;
  background: yellow;
  margin:auto auto 0;
  transform:translateY(100%);
}

<div id="outer">
  <div id="hover"></div>
</div>