How can I center bootstrap5 card-CodePudding

I'm trying to add this card to be on a center of web browser but I can't, is any body can show me how to center card in either bootstrap5 or css3?

I'm using Bootstrap5.

The Card

<div >
    <div >
        <div >
            <div  style="width: 18rem;">
                <img src="https://thumbs.dreamstime.com/b/young-black-man-smiling-to-camera-his-desk-office-young-black-man-smiling-to-camera-his-desk-office-108952653.jpg"  alt="...">
                <div >
                  <h5 >Card title</h5>
                  <p >Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" >Go somewhere</a>
                </div>
              </div>
        </div>
    </div>
  </div>

Even when I try to add justify-content-center in a row, it does not work.

<div >
    <div >
        <div >
            <div  style="width: 18rem;">
                <img src="https://thumbs.dreamstime.com/b/young-black-man-smiling-to-camera-his-desk-office-young-black-man-smiling-to-camera-his-desk-office-108952653.jpg"  alt="...">
                <div >
                  <h5 >Card title</h5>
                  <p >Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" >Go somewhere</a>
                </div>
              </div>
        </div>
    </div>
  </div>

CodePudding user response：

you could try "d-flex justify-content-center" at

<div >

it is due to the display of flex and flex attributes only affects the immediate child. Which means if your .card needs to have the "justify-content-center" style, it has to be set to its immediate parent.