居中文本里面的相對>絕對>相對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

這裏試試這個CSS， 只是用表和表單元，在100％的高度和寬度表。

.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>