Question

我有一个带有盒子的div：

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

我想让盒子的宽度达到其父级的50％，但我需要它绝对位于父级的中心

.grid-image {
    width:50%;
    height:50%;
    background-color:red;
    float:left;
    background-size:cover;
    position:relative;
}

.grid-box {
    border:5px #FFF solid;
    text-align:center;
    display:block;
    position:absolute;
    width:50%;
    right:50%;
    top:50%;
    margin:-25% -25% 0 0;
}

.grid-box h2 {
    color:#FFF;
    padding:15px 10px;
    letter-spacing:5px;
}

这种方法似乎不起作用，任何人都可以帮助我吗？

Answer 1

我已经创建了一段时间了。 CODEPEN 检查第一个div。

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

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

Answer 2

如果您认为.grid-box的父级宽度必须为50%，请将其从左侧25%放置。这是一个明确的数学

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

确保.grid-image具有固定的宽度 - 而不是百分比。

另外请注意，元素的计算维度是width，margin，border和padding的总和。因此，如果您设置50%宽度和25%，那么您实际上会获得父加 75%任何其他边框，边距和填充。

绝对定位百分比＆amp;响应

2 个答案: