CSS3中居中內圓div

Question

你可以看看this CSS DEMO，讓我知道我如何能夠將內部div集中在outter div中，並且還將內部div的文本居中？

.outer{ 
    width: 100px; 
    height: 100px; 
    background: #fc2e5a; 
    -moz-border-radius: 50px; 
    -webkit-border-radius: 50px; 
    border-radius: 50px; 
} 
.inner { 
    width: 80px; 
    height: 80px; 
    background: #fff; 
    -moz-border-radius: 50px; 
    -webkit-border-radius: 50px; 
    border-radius: 50px; 
} 

<div class="outer"> 
    <div class="inner">Test</div> 
</div> 

Answer 1

如果不使用table-cell或flex-box或position，如果你知道你的div的確切尺寸，那麼你可以做這樣的事情：

.outer{ 
    width: 100px; 
    height: 100px; 
    padding: 10px; 
    border-radius: 50%; 
    background: #fc2e5a; 
    -moz-box-sizing: border-box;  
     box-sizing: border-box; 
} 

.inner { 
    width: 80px; 
    height: 80px; 
    line-height: 80px; 
    border-radius: 50%; 
    text-align: center; 
    background: #fff; 
} 

這裏是demo

請注意，我刪除了針對border-radius的瀏覽器特定前綴，並將其設置爲50%以使其與整個大小無關。

Answer 2

http://jsfiddle.net/2Wkqn/5/

添加行

position: relative; 
top: 10px; 
left: 10px; 

您.inner CSS

包裝你的文字 「測試」 的段落標記，然後添加一個類 「.inner P」 你的CSS和輸入行：

padding-top: 30px; 
text-align: center;