Cómo centrar una imagen en un div y no morir en el intento usando CSS

Cómo este es un tema siempre complejo, ya que debemos de comprender todo lo relacionado a las posiciones relativas de los elementos, cómo también, entender exactamente a que cosas de mi documento HTML le estoy dando estilos y cómo estos estilos se aplican a los objetos hijos. Les comparto la manera en que logré centrar imágenes dentro de un div.

Crear la estructura HTML:

En este ejemplo usaremos la siguiente estructura HTML. Donde estamos haciendo la creación de una card.

HTML Objects

<section class="cards">
        <divclass="card"><p>Motorcycle</p><imgsrc="https://fotos.jornaldocarro.estadao.com.br/uploads/2020/01/31112429/a1d89f5309854f840e5ee43c0f37096b.jpg"alt="Motorcycle"><p>Future</p></div></section>

CSS InitialStyles

body{
            display: grid;
            flex-direction: column;
        }
.boxes{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-gap: 1px;
            justify-items: center;
            justify-content: center;
            width: 100%;
            margin: 10px;
        }
.card{
            width: 300px;
            height: 300px;
            background: papayawhip;
            border-radius: 20px;
            overflow: hidden;
            border: solid 5px black;
            box-sizing: border-box;
        }

Con el código anterior, directamente no se puede ver la imagen que acabamos de poner ya que hacen falta unos cuantos estilos más. Así que analicemos que podemos hacer:

1. Lo primero es que, la imagen base que tenemos está muy grande para el tamaño de la card. Por lo que a los estilos le iremos agregando gradualmente los cambios para ver su transformación:

.cardimg{
            height: 200px;
        }

1. Con esto ya tendríamos la imagen dentro de nuestra card. Ya que le estamos poniendo un alto especifico y directamente el navegador nos soluciona el ancho de la imagen. Sin embargo, aquí empezamos con lo necesario para el centrado.
   Le pondremos la margen derecha e izquierda a la imagen de manera automática. Y veremos aun así que esto no nos funciona (aún).

.cardimg{
        height: 200px;
            margin-left: auto;
            margin-right: auto;   	
 }

1. Ahora, para poder finalmente centrar la imagen. Debemos de dirigirnos a los conceptos básicos de display y cómo la propiedad block nos permite hacer que un elemento ocupe todo el ancho que puede (en este caso todo el ancho de la card) y ya que, nosotros tenemos el alto especificado y el navegador automáticamente decide el ancho de la imagen, finalmente esta queda correctamente centrada.

.cardimg{
            height: 200px;
            margin-left: auto;
            margin-right: auto;
            display: block;
        }

Y así, logras centrar una imagen sin morir en el intento.