相対的な>絶対>相対的なdiv内の中央のテキスト

Question

相対>絶対>相対>テキスト内のテキストを中央に配置しようとしています。私は見つけることができるソリューションのほとんどを試しましたが、私はそれを水平に集中させることしかできません。ここに私がこれまで持っているもののFiddleがあります。

HTML：

<div class='outer'> 
    <div class='inner'> 
    <div class='inner1'> 
     <p> 
     text 
     </p> 
    </div> 
    </div> 
</div> 

はCSS：

.outer{ 
    position: relative; 
    width: 500px; 
    height: 250px; 
    background-color: red; 
} 

.inner{ 
    position: absolute; 
    width: 100px; 
    height: 100px; 
    background-color: blue; 
    top:20px; 
    left: 50px; 
} 

.inner1{ 
    position: relative; 
} 

.inner1 p{ 
    text-align: center; 
    margin: 0; 
} 

Answer 1

ここでは、100％の高さと幅の表で、 だけで使用するテーブルとテーブルセルを、このCSSを試してみてください。

.outer{ 
 
    position: relative; 
 
    width: 500px; 
 
    height: 250px; 
 
    background-color: red; 
 
} 
 

 
.inner{ 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: blue; 
 
    top:20px; 
 
    left: 50px; 
 
} 
 

 
.inner1{ 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: table; 
 
} 
 

 
.inner1 p{ 
 
    text-align: center; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    margin: 0; 
 
}

<div class='outer'> 
 
    <div class='inner'> 
 
    <div class='inner1'> 
 
     <p> 
 
     text 
 
     </p> 
 
    </div> 
 
    </div> 
 

 
</div>