使用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>

Answer 2

.line{
  position:relative;        /* in order to contain inner absolute circle pos */
  margin-top:50px;
  background:red;
  height:0;
  border:1px solid red;
}
.circle{
  position: absolute;
  width:40px; height:40px;
  top:50%;    left:50%;                /* 50% of parent */
  transform: translate(-50%, -50%);    /* -50% of self */
  
  background:blue;
  border-radius:50%;
}

<div class="line">
  <div class="circle"></div>
</div>

Answer 3

只需将这些添加到您的圆圈类：

  position: relative;
  top: -20px;

Answer 4

看看这个https://jsfiddle.net/pgcft3z7/7/

.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;
  top: -65px;
  left: 0;
}
.container {
  margin-top: 100px;
  border: solid 1px;
  border-color: red;
}

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