Html 为什么React.Portal（）中的圆圈无法在div的中心垂直和水平对齐？

下面是演示：

我使用此解决方案来对齐元素-SCSS的代码段：

%loader__ripple_circle{
  ...
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  ...
 }
@extend %loader__ripple_circle

generateLoader=()=>(
    <div className="multi-ripple">  
      <div className="multi-ripple__first-circle"></div>
      <div className="multi-ripple__second-circle"></div>
    </div>
  )

  render() {
    let {generateLoader}=this
    let loaderModalDOM=document.getElementById("loader__modal")
    // return generateLoader()
    return  createPortal(generateLoader(), loaderModalDOM)
  }

该元素将在my modal-ReactJS的代码段中对齐：

%loader__ripple_circle{
  ...
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  ...
 }
@extend %loader__ripple_circle

generateLoader=()=>(
    <div className="multi-ripple">  
      <div className="multi-ripple__first-circle"></div>
      <div className="multi-ripple__second-circle"></div>
    </div>
  )

  render() {
    let {generateLoader}=this
    let loaderModalDOM=document.getElementById("loader__modal")
    // return generateLoader()
    return  createPortal(generateLoader(), loaderModalDOM)
  }

generateLoader=（）=>(
)
render（）{
设{generateLoader}=this
让loaderModalDOM=document.getElementById（“loader\uuu模态”）
//返回generateLoader（）
返回createPortal（generateLoader（），loaderModalDOM）
}

也就是说，圆圈被拖向屏幕的右下角。如何使他们在中心

---

我也尝试探索了

transform origin

提供的可能性，似乎问题出在其他地方。

我成功地使用flexbox将div居中，并删除了transform:translate的位置

演示已更新：