代码之家 › 专栏 › 技术社区 › Crashalot

使用百分比而不是绝对值将绝对DIV置于其父级之下

css3 css html

Crashalot · 技术社区 · 5 年前

This , this 和 this 问题是相似的,但没有帮助。

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

这个 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;
}

2 回复 | 直到 5 年前

Hiren Vaghasiya 5 年前

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>

Temani Afif BoltClock 5 年前

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

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