如何让一个div位于另一个div中心的div的中心？ [重复]

Question

我正在寻找使用 HTML 和 CSS 制作替代 WhatsApp 贴纸，如下面的代码：

#square {
  width: 161.5px;
  height: 161.5px;
  background-color: rgba(17,27,33,0.1);
  border-radius: 30%;
  position: relative;
}

#circle {
  width: 50px;
  height: 50px;
  background-color: rgba(11,20,26,0.35);
  border-radius: 50%;
  max-height: 100%;
  max-width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

#arrow {
  color: #ffffff;
  max-height: 100%;
  max-width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

<div id="square">
  <div id="circle">
    <div id="arrow">
      <svg viewBox="0 0 24 24" height="24" width="24">
        <path d="M19.4725963,12.2 L15.1725963,12.2 L15.1725963,2.9 C15.1725963,2.4 14.7725963,2 14.2725963,2 L9.97259631,2 C9.47259631,2 9.07259631,2.4 9.07259631,2.9 L9.07259631,12.2 L4.77259631,12.2 C3.97259631,12.2 3.77259631,12.7 4.27259631,13.3 L11.0725963,20.6 C11.7725963,21.5 12.4725963,21.3 13.1725963,20.6 L19.9725963,13.3 C20.4725963,12.7 20.2725963,12.2 19.4725963,12.2 Z" fill="currentColor"></path>
      </svg>
    </div>
  </div>
</div>

之前我设法通过在

position: relative

上制作

#square

和在

position: absolute

上制作

#circle

来使圆以正方形为中心。但是我无法让箭头位置位于圆心，因为圆已经有了绝对位置。

我怎样才能把箭头放在圆的中心（它在正方形的中心）？谢谢。

Answer 1

添加以下 CSS：

#arrow {
  display: flex;
  justify-content: center;
  align-items: center;
}

请参阅下面的片段。

#square {
  width: 161.5px;
  height: 161.5px;
  background-color: rgba(17,27,33,0.1);
  border-radius: 30%;
  position: relative;
}

#circle {
  width: 50px;
  height: 50px;
  background-color: rgba(11,20,26,0.35);
  border-radius: 50%;
  max-height: 100%;
  max-width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

#arrow {
  color: #ffffff;
  max-height: 100%;
  max-width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div id="square">
  <div id="circle">
    <div id="arrow">
      <svg viewBox="0 0 24 24" height="24" width="24">
        <path d="M19.4725963,12.2 L15.1725963,12.2 L15.1725963,2.9 C15.1725963,2.4 14.7725963,2 14.2725963,2 L9.97259631,2 C9.47259631,2 9.07259631,2.4 9.07259631,2.9 L9.07259631,12.2 L4.77259631,12.2 C3.97259631,12.2 3.77259631,12.7 4.27259631,13.3 L11.0725963,20.6 C11.7725963,21.5 12.4725963,21.3 13.1725963,20.6 L19.9725963,13.3 C20.4725963,12.7 20.2725963,12.2 19.4725963,12.2 Z" fill="currentColor"></path>
      </svg>
    </div>
  </div>
</div>