css盒子居中的代码是什么

在CSS中，让一个元素水平和垂直居中有多种方法，这取决于元素容器的定位以及你想兼容的不同浏览器。以下是几种常见的居中方法：

1. **Flexbox** (适用于现代浏览器):

   .parent {
     display: flex;
     justify-content: center; /* 水平居中 */
     align-items: center;    /* 垂直居中 */
   }
   
   .child {
     /* 其他样式 */
   }

2. **Grid** (也适用于现代浏览器):

   .parent {
     display: grid;
     place-items: center;  /* 同时水平和垂直居中 */
   }
   
   .child {
     /* 其他样式 */
   }

3. **绝对定位** (如果父级已知宽度和高度，并且不是流式布局):

   .parent {
     position: relative;
   }
   .child {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%); /* 让元素移动到其父容器中心 */
   }

4. **表格布局** (对于表格单元格):

   table, th, td {
     border-collapse: collapse;
   }
   th, td {
     text-align: center; /* 水平居中 */
     vertical-align: middle; /* 垂直居中 */
   }

以上代码适用于不同情况下的居中，选择哪种取决于你的需求及浏览器兼容性。如果需要跨浏览器通用，建议优先考虑Flexbox或Grid。