css - 在 CSS3 中居中内部圆形 Div

Question

你能看看this CSS DEMO吗？让我知道如何将内部 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;
}

这是 demo

请注意，我删除了 border-radius 的浏览器特定前缀，并将其设置为 50% 以使其独立于整个尺寸。