将 div 居中放置在可响应 window.innerWidth 和 window.innerHeight 大小的画布之上

Question

I am trying to add some text to the middle of my canvas background. I am having the hardest time figuring out how to add a div ON TOP OF IT, that will maintain position through resolution changes.

To start, here is how my canvas is being sized.

 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>

Basically, I want to add a div right in the middle of the canvas so that i can add some welcoming text and maintain my scroll-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

I found an awesome answer!

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%);
}