在html css中使网格居中的问题[重复]

Question

我有一个显示 mysqli 数据库数据的网格。我的问题是：网格在页面的左边，我想把它放在中间。我使用文本对齐和其他东西但不起作用。 （我只想显示 3 个网格）这是我的代码：

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 5px;
  padding: 10px;



}

.grid-container > div {
 background: linear-gradient(75deg, #3c3ad0, #269e88);
  text-align: center;
  border-radius: 20px;
  color: #fff;


}

.item1 {
  grid-row:span 1;
}


<p style="margin-top: 20px;text-align: center;font-size: 30px;color: #00b7c3"  >پروژه های اخیر</p>

<div class="grid-container">

  <div class="item1">
<p style="font-size:18px;">textt</p>
  <p style="font-size:10px;">texttt</p>
  <footer style="background-color:#35BD65;border-radius:0px 0px 20px 20px">
 'texttt'</footer>
  </div>

</div>

Answer 1

有什么理由需要使用网格？ 这是一个简单的 HTML 和 CSS 的解决方案

.grid-container {
  width:100%;
}

.grid-container > div {
  background: linear-gradient(75deg, #3c3ad0, #269e88);
  text-align: center;
  border-radius: 20px;
  color: #fff;
}

.item1 {
  width:200px;
  margin:0 auto;
}

<p style="margin-top: 20px;text-align: center;font-size: 30px;color: #00b7c3"  >Test</p>

<div class="grid-container">

  <div class="item1">
      <p style="font-size:18px;">text0</p>
      <p style="font-size:10px;">text1</p>
      <footer style="background-color:#35BD65;border-radius:0px 0px 20px 20px">text2</footer>
  </div>

</div>