将margin-top设置为父元素高度的百分比。

Question

我希望元素的margin-top是父元素高度的百分比。

例如，如果我有一个高度为100px的div，我想在其中创建一个p元素，它的margin-top为25px，但通过使用%设置p元素的margin，以便它可以处理其父元素的高度变化。

编辑：对于那些认为这很明显的人 - 你不能使用margin-top: 25％。除了height之外，%'s用于盒模型都使用父元素的宽度。因此，如果您使用margin-top: 25％，则将其设置为父div的宽度的25％。

- Don P

---

嗯... margin-top: 25%？ - Brett Weber

不是margin-top 25%，@brett。margin-top的百分比使用元素的宽度进行大小调整。 - Don P

第一印象。:p 嗯...现在我很感兴趣。 :) JavaScript是一个选择吗，还是你期望一个纯CSS的解决方案，就像标签中标记的那样？ - Brett Weber

CSS是理想的选择 :) JS会相当容易 - 但如果您的浏览器正在进行其他处理，则在调整大小时会出现卡顿，看起来会很廉价。 - Don P

为什么你不使用 translateY() 而是使用 margin-top？ - MeTe-30

哦，那很有意思，我还没有尝试过。 - Don P

Answer 1

这是我认为的一种解决方案：

这是我认为的一种解决方案：

 <div style="height:100px; background-color:red; color:white; position:relative;">
     <div style="top: 25%;position: absolute;">
         <p> I want an elements margin-top to be a % of t</p>
     </div>
 </div>

- Ravi Hamsa

Answer 2

尝试通过定位元素而不是给它一个边距来解决问题，像这样：

p {
  position: relative;
  top: 50%;
}

参考示例

- JoeJ

Answer 3

您可以使用JS在父元素渲染后测量其高度（offsetHeight），然后将其除以4并将结果分配给子元素的top或marginTop属性。

var parent = document.getElementById("parent");
var child = document.getElementById("child");
var marginVal = (parent.offsetHeight)/4;
child.style.top = marginVal+"px";

Fiddle: http://jsfiddle.net/Nillervision/AwqJK/

如果将JS代码封装在函数中，可以在页面加载时（window.onload）和浏览器调整父元素大小时（window.onresize）调用它。

- Nillervision

---

感谢Nillervision的回答，但目前不接受JS的解答。 - Don P