父Div元素内的图像居中问题

Question

我使用JavaScript在我网站的主页上创建幻灯片。我遇到的问题是，尽管我付出了最大努力，但图像不会以页面为中心。如果我像这样设置图像子元素，我可以使它居中：

#slider img {
    left: 218px;}

但这并不是不同窗口大小的中心。我正在使用相当大的图像，但它们总是可以在以后调整大小。我使用占位符作为小提琴。你怎么解决这个问题？

Fiddle

Answer 1

U可以通过设置轻松居中图像：

#slider img {
  display: block;
  margin: 0 auto;
  width: 100%; // or your own width
}

Answer 2

#slider内的图片有position: absolute。这会取消容器的范围，并且图像不再相对定位在容器div#slider内。

使用margin: auto和display: block ，无需绝对定位。

示例：https://jsfiddle.net/sukritchhabra/smndp65m/

Answer 3

尝试

{{1}}

Answer 4

你也可以margin:auto。