Question

我遇到了将流体图像水平居中在流体div中的问题。从高低看，其他人发现的解决方案对我来说不起作用，要么我努力做一些事情（我怀疑它），要么我在不同的媒介上工作。

HTML：

<body>
  <div id="BackgroudDiv">
    <img src="images/NumberTwo.png" alt="" id="FSBG"/>
  </div>
</body>

CSS：

body {
    margin: 0px
}
#FSBG {
    width: auto;
    height: 100%;
    min-width: 1040px;
    position: absolute;
    min-height: 585px;
}
#BackgroudDiv {
    width: 100%;
    height: 1080px;
    text-align: center;
    display: block;
    background-color: #BF2527;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

＆＃34;保证金：自动＆＃34;什么都不做，因为一切的宽度都是可变的。在代码中，图像的左边缘＆＃34; NumberTwo＆＃34;以页面为中心。我希望图像的中心居中。它的行为与缩放方式相同，但不在页面中间！

任何帮助都会非常感激，它一直在推动我。如果需要更多信息，请与我们联系。

H

Answer 1

当您使用绝对位置时，您需要将顶部，右侧和左侧设置为0px;然后你可以添加margin-left和margin-right auto。

示例 - https://jsfiddle.net/zvbn2fak/

top:0px;
left:0px;
right:0px;
margin-left:auto;
margin-right:auto;

请注意，这不是最佳做法，在图像不需要时使用绝对位置。请阅读lmgonzalves的评论，下面有一个更好的解决方案。

Answer 2

您只需要移除position: absolute;中的img：

#FSBG {
    width: auto;
    height: 100%;
    min-width: 1040px;
    min-height: 585px;
}

DEMO：https://jsfiddle.net/3w5rqg3d/1/

Answer 3

您可以使用flexbox，但请注意旧浏览器不支持flexbox。

#backgroundDiv {
  display: flex;
  justify-content: center;
}

就是这样。 justify-content沿着flex的方向对齐flexbox中的项目。我不确定它是否适用于position: absolute个项目，但您可以查看它。

注意：为了简洁起见，我已经离开了供应商前缀，但您可能需要添加这些前缀才能在浏览器中获得所需的效果。

无法将流体图像置于流体Div中

3 个答案: