html 网格布局居中

HTML网格布局居中通常通过CSS来实现。你可以使用现代CSS框架如Bootstrap，或者直接使用纯CSS Grid或者Flexbox。这里给出两种常见的方法：

1. CSS Flexbox 居中:

   <div class="container">
     <div class="item flex-item">内容</div>
   </div>
   
   <style>
     .container {
       display: flex;
       justify-content: center; /* 水平居中 */
       align-items: center; /* 垂直居中 */
       height: 100vh; /* 设置视口高度，保证居中效果 */
     }
     .flex-item {
       width: 50%;
     }
   </style>

2. CSS Grid 居中:

   <div class="container grid-container">
     <div class="grid-item">内容</div>
   </div>

   <style>
     .container {
       display: grid;
       place-items: center; /* 自动水平和垂直居中 */
       height: 100vh;
     }
     .grid-item {
       background-color: #f1f1f1;
     }
   </style>