将 div 置于画布顶部的中心，该画布的大小响应调整为 window.innerWidth 和 window.innerHeight

Question

我正在尝试在画布背景的中间添加一些文本。我很难弄清楚如何在其顶部添加一个 div，这将通过分辨率更改来保持位置。

首先，这是我的画布的大小。

var canvas = document.getElementById('first-canvas');
var ctx = canvas.getContext('2d');

initialize()

function initialize() {
  window.addEventListener('resize', resizeCanvas, false);
  resizeCanvas();
}

function redraw() {
  ctx.strokeStyle = 'black';
  ctx.lineWidth = '5';
  ctx.strokeRect(0, 0, window.innerWidth, window.innerHeight);
}

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  redraw();
}

html,
body {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  margin: 0px;
  border: 0;
  /* No floating content on sides */
}

body {
  overflow-x: hidden;
}

#btn-container {
  display: flex;
  justify-content: center;
  text-align: center;
}

#first-canvas {
  background-color: #393939;
  overflow: hidden;
  position: relative;
}

#scroll-btn {
  display: flex;
  justify-content: center;
  text-align: center;
  position: absolute;
  top: 0px;
  margin: 0;
  padding: 0;
  font-color: white;
  border: solid 2px white;
  width: 250px;
  height: 75px;
}

<section class="canvas">
  <canvas id="first-canvas" style="position:relative; left: 0px; top: 0px;"></canvas>
  <a href="#">
    <div id="btn-container">
      <div id="scroll-btn">
        <h3>View My Page></h3>
      </div>
    </a>
  </div>
<section>

基本上，我想在画布中间添加一个 div，这样我就可以添加一些欢迎文本并维护我的滚动 btn。

Answer 1

html,
body {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  margin: 0px;
  border: 0;
  /* No floating content on sides */
}

body {
  overflow-x: hidden;
}

#btn-container {
  display: flex;
  justify-content: center;
  text-align: center;
}

#first-canvas {
  background-color: #393939;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#scroll-btn {
  display: flex;
  justify-content: center;
  text-align: center;
  margin: 0;
  padding: 0;
  font-color: white;
  border: solid 2px white;
  width: 250px;
  height: 75px;
}
.canvas {
   width: 100%;
   height: 100%;
   position: relative;
}
a {
   display: block;
   position: absolute;
   z-index: 1;
   top: calc(100% - 37.5px);
   left: calc(100% - 125px);
}
h3 {
   margin: auto;
}

Answer 2

我找到了一个很棒的答案！

div {
  background:green;
  position:fixed;
  color:#fff;
  width:50px;
  height:50px;
  top:50%;
  left:50%;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}