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;
}
)
)
