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

To center the canvas element horizontally, you must specify it as a block level and leave its left and right margin properties to the browser:

canvas{
    margin-right: auto;
    margin-left: auto;
    display: block;
}

If you wanted to center it vertically, the canvas element needs to be absolutely positioned:

canvas{
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);              
}

If you wanted to center it horizontally and vertically, do:

canvas{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);               
}

For more info visit: https://www.w3.org/Style/Examples/007/center.en.html