Css 绝对定位与百分比&；反应敏捷的

我有一个里面有一个盒子的div：

<div class="grid-image" id="grid-1">
  <div class="grid-box">
     <h2>SAMPLE TEXT</h2>
  </div>
</div>

---

这种方法似乎不起作用，有人能帮我吗？

如果您假设

.grid box

必须是其父对象的

50%

宽度，然后将其从左侧定位到

25%

。这很清楚

.grid-box {
    position: absolute;
    width: 50%;
    height: 50%;
    top: 25%;
    left: 25%;
    margin: 0;
}

只需确保

.grid image

具有固定的宽度，而不是百分比

---

还要注意，元素的计算尺寸是

宽度

、

边距

、

边框

和

填充

的总和。因此，如果您设置

50%

宽度和

25%

左侧，您将实际获得父级的

75%

加上任何附加边框、边距和填充。

我以前创建过这个检查第一部分

这适用于任何宽度和高度，而不仅仅是50%

.absolute-positioned-div{
    height:50%;
    width:50%;
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translateY(-50%) translateX(-50%);
}

---

您希望它也具有

50%

高度吗？绝对定位的元素有自己的布局上下文，因此它们不知道父元素有多大。如果你只想让元素居中，为什么你需要绝对定位？@Diodeus他们确实有主意。如果为

网格框设置
50%
宽度，它实际上将从
网格图像中获取
50%
，但前提是
.grid image
具有固定宽度值（非%）。无需绝对定位。。。我只是需要它坐在中间
.absolute-positioned-div{
    height:50%;
    width:50%;
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translateY(-50%) translateX(-50%);
}