CSS居中（包括水平居中和垂直居中）的方案有哪些？

参考答案：

CSS居中的方案有很多种，下面列举了一些常见的方法：

行内元素的水平居中：可以通过设置父元素的 text-align: center; 来实现。
块级元素的水平居中：如果元素的宽度已知，可以通过设置 margin-left 和 margin-right 为 auto 来实现。
绝对定位元素的水平居中：如果元素使用了绝对定位，可以通过设置 left: 50%; 和 transform: translateX(-50%); 来实现。这种方法实际上是先将元素的左边缘移动到父元素的中心，然后使用 transform 属性将元素本身向左移动其自身宽度的一半，从而实现水平居中。
Flex布局的水平居中和垂直居中：将父元素设置为Flex布局，然后通过 justify-content: center;（水平居中）和 align-items: center;（垂直居中）来实现。Flex布局是CSS3引入的一种新的布局模式，可以很方便地实现各种复杂的布局效果。
CSS Grid布局的水平居中和垂直居中：使用CSS Grid布局也可以实现元素的居中。设置父元素为grid容器，然后使用 place-items: center;（水平和垂直居中）或 justify-items: center;（水平居中）和 align-items: center;（垂直居中）来实现。
使用CSS的transform属性：如果元素的宽度和高度都是未知的，可以使用 position: absolute;、top: 50%;、left: 50%; 和 transform: translate(-50%, -50%); 来实现居中。这种方法实际上是先将元素的左上角移动到父元素的中心，然后使用 transform 属性将元素本身向上和向左移动其自身宽度和高度的一半，从而实现居中。

以上就是一些常见的CSS居中方案，具体使用哪种方案取决于你的具体需求和场景。