为何椭圆内圆点渲染在外？如何实现相对定位的圆点布局

椭圆内圆点偏移的原因 #

你遇到的椭圆内圆点跑到外部的问题，本质是定位参考的是元素的盒模型边界，而非椭圆的视觉边界。椭圆是通过border-radius: 50%实现的，但元素实际占用的仍是矩形空间。如果圆点仅用top: 50%+left: 50%定位，会以矩形的左上角为基准计算位置，圆点的左上角落在矩形中心，当椭圆宽高比例差异大时，圆点的部分区域就会超出椭圆的视觉范围。

通用解决方案（支持自定义宽高+相对定位） #

以下方法能让圆点始终贴合形状内部中心，且支持任意调整形状宽高：

核心思路

1. 给形状容器设置position: relative，作为圆点的定位参考容器；
2. 圆点使用position: absolute，结合top: 50%+left: 50%定位到容器的盒模型中心；
3. 通过transform: translate(-50%, -50%)将圆点的自身中心与容器中心重合，彻底解决偏移问题；
4. 若要让圆点在垂直方向更靠近中心（比如轻微上移/下移），只需调整translateY的百分比即可，不会破坏相对定位关系。

代码实现

<div class="shape rectangle">
  <div class="dot"></div>
</div>
<div class="shape ellipse">
  <div class="dot"></div>
</div>

.shape {
  position: relative;
  border: 2px solid #000;
  margin: 20px;
  /* 支持自定义宽高，直接修改下面的width/height即可 */
}

.rectangle {
  width: 200px;
  height: 150px;
}

.ellipse {
  width: 250px;
  height: 120px;
  border-radius: 50%;
}

.dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: red;
  /* 精准居中 */
  transform: translate(-50%, -50%);
  /* 若要垂直靠近（比如往上偏移自身高度的10%），修改为：
  transform: translate(-50%, -60%);
  */
}

为什么之前的尝试失效？ #

• Flexbox：如果没有正确设置容器的display: flex+justify-content: center+align-items: center，或者容器的盒模型属性（如padding）干扰了居中逻辑，会导致偏移；
• 独立容器继承属性：继承的属性无法直接绑定到形状的视觉中心，一旦宽高变化，继承的百分比值会失效；
• 强制定位圆点：使用固定px值定位，完全依赖当前的宽高尺寸，一旦窗口或形状尺寸改变，必然出现偏移。

内容的提问来源于stack exchange，提问作者Espen B