How can I center grid in the middle of a page if there is enough space

.content{
display: grid;
grid-template-columns: repeat(auto-fill, 21.25em);
gap: 20px;
justify-content: center;
align-content:center;
align-items:center;
}

I made this grid for three cards in a section, and I recognized that my grid works well but when I zoom out I see that the grid is in the left of the page and not centered. What the usual way to center these grid items? Should I put them in contaier or like is there a way to center the whole page or is there a grid feature for that?

>Solution :

If you are using Bootstrap, just use an outer div around grid with class="text-center". Example below:

<div class="text-center">
  <table>...</table>
</div>