背景图和叠加图层如何水平居中

背景图和叠加图层想要水平居中，可以采用CSS布局技术来实现。以下是常见的两种方法：

1. **相对定位** (position: relative): 将包含背景图和图层的容器设置为`relative`定位，并将它们设置为`absolute`定位，然后利用`left: 50%`和`transform: translateX(-50%)`让元素向左偏移自身宽度的一半，达到居中的效果。

.container {
  position: relative;
}

.background-layer, .overlay-layer {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

2. **Flexbox布局**: 如果你的元素是在响应式设计中，并且希望在各种屏幕尺寸下都保持居中，可以使用Flexbox布局。给包含元素的容器设置`display: flex; justify-content: center;`即可使其内部内容水平居中。

.parent-container {
  display: flex;
  justify-content: center;
  align-items: center; /* 如果还有垂直居中需求 */
}