How to center canvas in html5

Question

I\'ve been searching for a solution for a while now, but haven\'t found anything. Maybe it\'s just my search terms. Well, I\'m trying to make the canvas center according to

Answer 1

Using grid?

const canvas = document.querySelector('canvas'); 
const ctx = canvas.getContext('2d'); 
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, canvas.width, canvas.height);

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: black;
}

body {
    display: grid;
    grid-template-rows: auto;
    justify-items: center;
    align-items: center;
}

canvas {
  height: 80vh; 
  width: 80vw; 
  display: block;
}