总结：css中水平居中

css水平居中功能很常用，但一直没有系统的总结过，今天来总结水平下常见的方式：

1. 文本或内联元素的居中：
使用 text-align: center; 属性可以让内部的文本和内联元素在容器中水平居中。

.container {
  text-align: center;
}

2. 块级元素的居中：
对于固定宽度的块级元素，使用 margin: auto; 可以实现水平居中。

.block {
  width: 50%; /* 或者具体的像素值 */
  margin: 0 auto;
}

3. Flexbox 的居中：
在使用 Flexbox 布局时，通过设定 justify-content: center; 在主轴上居中对齐子元素。

.flex-container {
  display: flex;
  justify-content: center; /* 主轴居中 */
}

4. 绝对定位的元素居中：
通过设置绝对定位的元素的 left: 50%; 并结合 transform: translateX(-50%); 可以实现水平居中。

.abs-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

5. Grid 布局的居中：
使用 Grid 布局，可以设置 justify-items: center; 或 place-items: center; 来实现子项的水平居中。

.grid-container {
  display: grid;
  justify-items: center; /* 对齐单个项 */
  /* 或使用下面的属性同时设置水平和垂直居中 */
  place-items: center;
}