Uploaded image not centered on Safari - html

Question

I upload image from user and display it on my page. I have also a canvas that I used to mark lines on image. I want to have image displayed in the same place as canvas which is center. Right now image image display starts from center. The problem doesn't exist on Firefox and Chrome but only on Safari. I use also materialize.css in this project.
How can I display image in exact center?
<style>
.image {
position: absolute;
z-index: 1;
}
.container {
display: inline-block;
margin: 0 auto;
position: relative;
width: 100%;
}
.canvas {
position: relative;
z-index: 20;
}
</style>
<div class="container">
<img
width="400"
height="400"
class="image"
/>
<canvas width="400" height="400" class="canvas" />
</div>
Red thing is my image

Answer 1

There are many ways to center an image. In your case, I'd recommend using display: block; margin: 0 auto; and giving it a max-width: 400px; width: 100%; so the image always maintain the aspect ratio and doesn't get bigger than what you want.
If you use width: 400px, when it reaches devices with a small width (phones) it will make the page scroll which is bad UX. Furthermore, you usually don't need the height: 400px. When you add an actual image, let the image fill the height automatically.
Also, avoid putting styles on the markup. All styles should be in the CSS for organization.
Look into learning the basics of HTML/CSS through a course. It doesn't really matter whether you use Bootstrap, Materialize, Bulma, etc. It all comes down to the basics.
.image {
display: block;
margin: 0 auto;
max-width: 400px;
width: 100%;
height: 400px;
border: 1px solid lightgray;
}
Check code on codepen here.