如何定位一个圆形的圆形，在一个矩形div的中间位置和该div的一半？

Question

我正试图在一个矩形div上面放一个圆圈，圆圈的一半在div之外。

我首先尝试将矩形div的上半部分透明，以便给出圆形div在div中间的错觉。

我的问题：

我的问题有更好的解决方案吗？

参见附图，了解所需结果

Answer 1

另一种选择是使用css 2d transforms手动移动圆圈。这使您可以为循环div使用动态大小的内容。但是，除非您转换内容，否则您无法使用圆圈正下方的空间。此外，如果您尝试定位旧浏览器（IE8及以下版本），这将无法工作。

Here's a fiddle.

And here's a fiddle showing transform being animated from its original position to its transformed position.

Answer 2

尝试以下css。圆具有absolute位置，左边50％，并且给出与圆的半径相同的负边距，因此圆的中心始终位于矩形的中间。然后给出与上边距相同的半边的负边距，因此圆圈显示在div之外。

.circle {
  background: red;
  width: 100px;   /* circle diameter */
  height: 100px;   /* circle diameter */
  border-radius: 50%;
  position: absolute; 
  top: 0; 
  left: 50%;
  margin: -50px 0 0 -50px; /* minus circle radius */
}
.rectangle {
  background: blue;
  width: 300px;
  height: 100px;
  margin-top: 50px;   /* circle radius */
  position: relative;
}

<div class="container">

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

Answer 3

这是我尝试延长Niyoko的答案

＆＃13;

＆＃13;

.circle {
  background: red;
  width: 100px;   /* circle diameter */
  height: 100px;   /* circle diameter */
  border-radius: 50%;
  position: absolute; 
  top: 0; 
  left: 50%;
  margin: -50px 0 0 -50px; /* minus circle radius */
}
.rectangle {
  background: blue;
  width: 300px;
  height: 150px;
  margin-top: 50px;   /* circle radius */
  position: relative;
}
.inner-wrap {
    text-align: center;
    color: #fff;
    padding: 60px 10px 10px 10px;
}

＆＃13;

<div class="container">
  <div class="rectangle">
    <div class="circle"></div>
    <div class="inner-wrap">
      <p>some text</p>
      <p>some text</p>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;