在画布元素上居中 div

【问题标题】：Center div over canvas element在画布元素上居中 div
【发布时间】：2021-07-28 22:25:51
【问题描述】：

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

当前状态：Link

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

我意识到我没有更新我的原始链接以将地球设置为width: 70vw，因为我在我的项目中有它。当我调整到覆盖关闭时。一般来说，我也无法让叠加层在画布上对齐。
@Matt 元素需要位于父元素内，70vw 位于70vw 的中心。将70vw 和position: relative 应用到更高的位置或使用70vw 将元素移动到<div> 中