css让容器水平居中

CSS中的水平居中通常通过几种方式实现，特别是对于块级元素：

1. **Flexbox**：
如果容器是flex容器，可以使用`display: flex; justify-content: center;`。例如：

   .container {
     display: flex;
     justify-content: center;
   }

2. **Grid**：
对于grid布局，可以设置`justify-items: center;`：

   .container {
     display: grid;
     justify-items: center;
   }

3. **绝对定位 + 宽度百分比**：
将容器设置为`position: relative;`，然后子元素设置为`position: absolute; left: 50%; transform: translateX(-50%);`:

   .container {
     position: relative;
   }
   .centered-element {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
   }

4. **内联盒模型**（仅适用于行内元素）：
如果元素是行内元素，可以利用`text-align: center;`使其左右居中：

   .container {
     text-align: center;
   }