css - 绝对定位与百分比和响应

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 检查第一部分。

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

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