尝试通过 CSS 使图像居中答案

【问题标题】：Trying to center an image via CSS尝试通过 CSS 使图像居中
【发布时间】：2023-03-16 18:41:01
【问题描述】：

我正在尝试通过将其置于页面中心来使此图像居中，但它似乎总是更偏向左侧。

我遗漏了哪一部分或者我应该删掉哪一部分？谢谢

这是我的代码：

<body>
<div id="container">
    <div id="thumbnail"><img src="tilden regional park.jpg" /></div>
    <div id="heading">Tilden Regional Park</div>
</body>

这是我的 CSS：

    body {
      font-family:  Open Sans, Arial, Verdana;
      margin: 100px 100px 100px 100px;
      text-align: center;
    }

    #container {
      width:960px;
      margin-left: auto;
      margin-right: auto;
      padding: 30px 0px;
    }

    #thumbnail {
      height: 500px;
      width: 500px;
    }

    #thumbnail img {
      display: block;
      margin-left: auto;
      margin-right: auto;
      height: 100%;
      width: 100%;
    }

【问题讨论】：

为什么不用它作为背景图片？

标签： html css image center margin

【解决方案1】：

<div id="container">
    <div id="thumbnail"><img src="https://www.google.co.uk/images/srpr/logo11w.png" /></div>
    <div id="heading">Tilden Regional Park</div>
</div>

唯一需要的样式是：

#thumbnail {
    height: 500px;
    width: 500px;
    margin: 0 auto;
}
#thumbnail img {
   height: 100%;
   width: 100%;
}

您需要为要居中的元素添加auto 边距，这将是#thumbnail 而不是图像本身，因为图像具有 100% 的宽度和高度。

http://jsfiddle.net/F3337/

【讨论】：

【解决方案2】：

从#container 中删除边距并将margin: 0 auto 添加到#thumbnail。也不需要body上的margin声明。

通过为 div 分配颜色，调试更容易。

【讨论】：

【解决方案3】：

您错过了将“margin: 0 auto”添加到 id 缩略图，而不是 img ！所以：

#thumbnail {
   height: 500px;
   width: 500px;
   margin: 0 auto;
}

#thumbnail img {
   display: block;
   height: 100%;
   width: 100%;
}

【讨论】：

你的答案和我的不一样吗？
对不起，你的速度更快 :)