Hola ¿Como puedo poner mis tarjetas al centro? <code>&lt;code&gt; .products{ background-image: url("../images/curva.png"); heigh...

Hola

¿Como puedo poner mis tarjetas al centro?

<code>
.products{
    background-image: url("../images/curva.png");
    height: 200px;
    background-size: cover;
    background-position: center top;
    padding: 5%;
    display: flex;
}

.product{
    padding: var(--space);
    margin-top: -240px;
}

.product .content{
    background-color: var(--white-color);
    padding: 20px;
    box-shadow: var(--box);
    

}

.img_contend{
    text-align: center;
}

<code>

   <div class="products">
       <div class="product">
           <div class="content">
            <div class="img_content">
                <img src="images/gatito.jpg" alt="">
               </div>
               <h1>Producto 1</h1>
               <p> Mas de un producto en el mercado lo mejor de lo mejor</p>
               <button href="#" class="main_button">Lo quiero</button>
           </div>
       </div>
       <div class="product">
        <div class="content">
            <div class="img_content">
                <img src="images/gatito.jpg" alt="">
               </div>
            <h1>Producto 2</h1>
            <p>Mas de un producto en el mercado lo mejor de lo mejor</p>
            <button href="#" class="main_button">Lo quiero</button>
        </div>
    </div>
   </div>