パーセンテージとフレックスボックスのないdivの中で、インライン要素を絶対位置に垂直にセンタリング

Question

パーセンテージで区切ってdiv内にある絶対位置のインライン要素を垂直方向にセンタリングしようとしています。フレックスボックスそして、あらゆる種類のアスペクト比で動作しなければなりません。

.outerElement1 { 
 
    height: 200px; 
 
    width: 250px; 
 
    background: gray; 
 
    font-size: 0; 
 
    line-height: 0; 
 
} 
 

 
.outerElement2 { 
 
    height: 250px; 
 
    width: 200px; 
 
    background: gray; 
 
    font-size: 0; 
 
    line-height: 0; 
 
} 
 

 
.innerElement { 
 
    height: 100%; 
 
    width: 100%; 
 
    background: tomato; 
 
    opacity: 0.5; 
 
    position: relative; 
 
} 
 

 
h2 { 
 
    font-size: 20px; 
 
    height: 100%; 
 
    width: 100%; 
 
    border: 4px solid white; 
 
    display: block; 
 
    position: absolute; 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding-top: 50%; 
 
}

<div class="outerElement1"> 
 
    <div class="innerElement"> 
 
     <h2>Text</h2> 
 
    </div> 
 
</div> 
 
<div class="outerElement2"> 
 
    <div class="innerElement"> 
 
     <h2>Text</h2> 
 
    </div> 
 
</div>

誰かが私は本当に感謝されることをどのように達成するかについての考えを持っている場合！

Answer 1

outerElementの高さを固定しているので、line-heightを高さと同じに固定し、h2タグでline-height: inherit;を使用すると、常に中央に配置されます。

.outerElement1 { 
 
    height: 200px; 
 
    width: 250px; 
 
    background: gray; 
 
    font-size: 0; 
 
    line-height: 200px; 
 
} 
 

 
.outerElement2 { 
 
    height: 250px; 
 
    width: 200px; 
 
    background: gray; 
 
    font-size: 0; 
 
    line-height: 250px; 
 
} 
 

 

 
.outerElement3 { 
 
    height: 20vh; 
 
    width: 200px; 
 
    background: gray; 
 
    font-size: 0; 
 
    line-height: 20vh; 
 
} 
 

 
.innerElement { 
 
    height: 100%; 
 
    width: 100%; 
 
    background: tomato; 
 
    opacity: 0.5; 
 
    position: relative; 
 
} 
 

 
h2 { 
 
    font-size: 20px; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    border: 4px solid white; 
 
    position: absolute; 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    line-height: inherit; 
 
    text-align: center; 
 
}

<div class="outerElement1"> 
 
    <div class="innerElement"> 
 
    <h2>Text</h2> 
 
    </div> 
 
</div> 
 
<div class="outerElement2"> 
 
    <div class="innerElement"> 
 
    <h2>Text</h2> 
 
    </div> 
 
</div> 
 
<div class="outerElement3"> 
 
    <div class="innerElement"> 
 
    <h2>Text</h2> 
 
    </div> 
 
</div>