CSS3 中的内部圆形 div 居中

Question

我正在制作这个 CSS 演示。如何使内部 div 居中于外部 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;
}

这是演示

请注意，我删除了

border-radius

的浏览器特定前缀，并将其设置为

50%

以使其独立于整个大小。

Answer 2

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

添加行

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

到你的.inner CSS

将文本“Test”包裹在段落标签中，然后将类“.inner p”添加到CSS并输入以下行：

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