.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
}.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto }
...
<IMG class="displayed" src="..." alt="...">img {
display:block;
margin: 0 auto; /* the fastest way to center anything */
}<div style="width: 300px; height: 300px;">
<img src="./image.png" class="center">
</div>
.center{
object-fit: scale-down;
max-width: 100%;
max-height: 100%;
height: 15em; /*set your constraint to height/width and set the other to auto*/
width: auto;
}