What is the best way to center an image?

Question

css

Hello! There are the following 2 options for centering the image https://jsfiddle.net/qc9pmb7k/ , the first option is bad because you have to set different values ​​for the width and height of the block with the image at different resolutions (if the block itself is adaptive), so that it is always centered. The second option eliminates all this (almost) but the question of accessibility arises. Is it worth adding aria attributes in this case, so that search engines understand that there should be an image there? what about title and alt in this case?
What are the alternative, as simple as possible solutions to cover the following 4 questions:
1) Accessibility
2) Adaptability
3) Simplicity of css
4) Cross-browser compatibility

Answer 1

If the image is part of the content, only the <img alt="">. If the image performs an exclusively decorative role, then the background.

Answer 2

at the parent:

display flex;
justify-content: center; 
align-items: center;