求助：父div设置自动居中后，内部子div无法正确右对齐

我来帮你搞定这个按钮对齐的麻烦！

首先咱们得搞清楚问题出在哪：你给#BG加了margin:25px auto 0 auto让它水平居中，但如果#BG本身没有设置明确的宽度（比如和图片#slide一致的宽度），它会默认占满父容器的100%宽度，这时候auto居中其实没起真正的作用——而你的按钮之前是锚定在视口右侧，现在#BG的宽度随窗口变化时，按钮的定位基准就乱了。

接下来给你两种靠谱的解决方案，根据你的布局选就行：

方案一：用绝对定位固定按钮位置 #

这是最稳妥的方式，能让按钮牢牢贴在图片的右上角：

1. 先给#BG添加相对定位和明确宽度（和你的图片#slide宽度一致）：

#BG {
  margin: 25px auto 0 auto;
  position: relative; /* 让子元素的绝对定位以它为基准 */
  width: 800px; /* 替换成你实际的图片宽度，比如#slide的宽度 */
  /* 如果是响应式布局，可以改成 max-width: 100%; width: fit-content; */
}

2. 调整按钮的CSS，改成绝对定位：

#nextBtnBG, #nextBtn {
  position: absolute;
  right: 15px; /* 按钮距离#BG右侧的距离，按需调整 */
  top: 50%; /* 让按钮垂直居中于图片，可选 */
  transform: translateY(-50%); /* 配合top:50%实现精准垂直居中 */
  /* 删掉之前的float:right或者其他可能干扰的定位属性 */
}

这样设置后，按钮会一直锚定在#BG的右侧，不管窗口怎么拉大，#BG保持水平居中，按钮也会稳稳地悬浮在图片右上角。

方案二：修正浮动布局的容器宽度 #

如果你之前用的是float:right来让按钮右对齐，那问题出在#BG的宽度没有固定：

1. 给#BG设置和图片一致的宽度：

#BG {
  margin: 25px auto 0 auto;
  width: 800px; /* 同图片宽度 */
  overflow: hidden; /* 清除浮动影响，避免容器高度塌陷 */
}

2. 按钮保持float:right：

#nextBtnBG, #nextBtn {
  float: right;
  /* 可以加个margin-right来调整和右侧的距离 */
}

这种方式下，#BG的宽度固定，按钮浮动在容器右侧，窗口变化时#BG居中，按钮位置也不会偏移。

你可以先试试方案一，绝对定位的方式更适合悬浮按钮的场景，能保证按钮和图片的相对位置始终一致～

内容的提问来源于stack exchange，提问作者Chewie The Chorkie