How to fix a bug in FF (horizontal and vertical centering)?

Question

css

Good day.
The task is to center the block with the diagram horizontally and vertically. In ie11, chrome and safari everything works as it should, but in FF it crashes, I can't figure out what the problem is.
Code example

Answer 1

Try like this:

canvas {
  display: block;
  position: absolute;
  top:50%;
  left:50%;
  margin: auto;
  transform: translateX(-50%) translateY(-50%);
  width: 20%;
}