javascript - 使用 CSS 将圆移动到边框顶部

Question

将我的大问题分解为这个简单的陈述，我在一个带有红色边框的框内有一个蓝色圆圈。

如何使圆圈保持在中心但使其重叠在框边框的顶部水平线上？

我的尝试似乎达到了最终结果:https://jsfiddle.net/pgcft3z7/1/

HTML:

<div class="container">
  <div class="circle">
    Circle Text Here
  </div>
</div>

CSS:

.circle {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  color: white;
  border-radius: 50%;
  width: 130px;
  height: 130px;
  margin: 0 auto;
  background: blue;
  position:absolute;
  top: -5px;
  left: 200px;
}

.container {
  margin-top: 40px;
  border: solid 1px;
  border-color: red;
}

这涉及到我需要手动指定一个 left 和 top，这似乎不会保持居中或者会非常敏感。

当前的示例:

https://jsfiddle.net/pgcft3z7/

Answer 1

这里是 JSFiddle .

.circle {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  color: white;
  border-radius: 50%;
  width: 130px;
  height: 130px;
  margin: 0 auto;
  background: blue;
  position: relative;
}
.border {
  border: solid 1px;
  border-color: red;
  width: 100%;
  height: 70px;
  top: 30px;
  position: absolute;
}
.container {
  margin-top: 40px;
  position: relative;
}

<div class="container">
  <div class="border">

  </div>
  <div class="circle">
    Circle Text Here
  </div>
</div>