图片无法居中求助：如何让div容器上方的图片居中？

你的问题出在给图片设置了position: absolute和left: 0，这时候margin: auto无法生效——绝对定位元素脱离了正常文档流，默认的居中规则不适用。下面给你两种可行的修复方法：

方法一：修正绝对定位的居中逻辑 #

首先给父容器.main-container添加相对定位，让绝对定位的图片以它为参考：

.main-container {
  position: relative;
}

然后修改图片的CSS，去掉left: 0和top: 0，改用left: 0; right: 0配合margin: auto实现水平居中，同时保留垂直位置的调整：

.ipl-img {
  padding-top: 90px;
  margin: 0 auto;
  width: 50%;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
}

这样图片就能水平居中，同时保持在.center容器的上方（靠z-index:1维持层级）。

方法二：用Flex布局（更简洁现代） #

如果不需要绝对定位，推荐用Flex布局实现，代码逻辑更简单：
给父容器.main-container设置Flex属性，让子元素垂直排列并水平居中：

.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

然后去掉图片的绝对定位相关属性，保留其他样式：

.ipl-img {
  padding-top: 90px;
  width: 50%;
  z-index: 1;
}

这种方式不需要处理复杂的定位逻辑，图片会自动在父容器水平居中，且因垂直排列会自然出现在.center容器的上方。

两种方法都能解决你的问题，推荐优先使用Flex布局，更符合现代前端的布局规范。

内容的提问来源于stack exchange，提问作者CodeGirl