html - 如何使用css使内圆居中

Question

div.container{
  border:1px solid red;
  position:relative;
}
span.parent{
  display:inline-block;
  width:30px;
  height:30px;
  border:1px solid gray;
  border-radius:50%;
  text-align: center;
  position:absolute;
  right:20px;
  top:10px;
}

span.child{
  background:green;
  width:80%;
  height:80%;
  display:inline-block;
  border-radius:50%;
  left:10%;
  top:10%;
  position:relative;
}

<div class="container">
  <p>some info goes here</p>
  <span class="parent"><span class="child"></span></span>
</div>

我正在尝试创建一个带边框的实心圆，但填充没有正确居中。如何解决这个问题？

Answer 1

另一种方法是使用 Flexbox。

如果您将以下内容添加到您的 parent :

display: flex;
align-items: center;
justify-content: center;

并且移除子元素的相对定位，子元素将在父元素内居中。

div.container{
  border:1px solid red;
  position:relative;
}
span.parent{
  display: flex;
  align-items: center;
  justify-content: center;
  width:30px;
  height:30px;
  border:1px solid gray;
  border-radius:50%;
  text-align: center;
  position:absolute;
  right:20px;
  top:10px;
}

span.child{
  background:green;
  width:80%;
  height:80%;
  display:inline-block;
  border-radius:50%;
}

<div class="container">
  <p>some info goes here</p>
  <span class="parent"><span class="child"></span></span>
</div>

编辑:如果您遇到 flexbox 圆圈在较小分辨率下被挤压的问题，请尝试使用 min-height 和 min-width，并使用 margin: auto 代替 display: flex 居中。