html - 使用百分比而不是绝对值将绝对 div 在其父项下居中

Question

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

目标是使用百分比而不是绝对值将元素置于其父元素的中心。这样，如果尺寸发生变化，则位置值无需更改。

下面的 hover 元素在 outer 下居中，但是定位需要绝对值，这取决于 hover 和 outer 的大小。如果其中任何一个发生变化，则位置值也必须发生变化。

可以通过百分比实现在 parent 之下居中吗？

代码笔: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%;左:0px；右: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>