在 canvas 元素上居中 div

Question

使用 react-globe，我试图将带有消息的 div 居中放置在 canvas 元素上，一旦用户与地球交互，该元素也可以被删除。我在页面中有 div，但无法将其置于 canvas 元素的中心。

当前状态：Link

Answer 1

您可以通过添加以下内容来使用绝对位置居中技术：

top: 50%;
left: 50%;
transform: translate(-50%);

请注意，当前相对于根居中，居中相对于 "globe-wrapper" 添加 position: relative。