无法在流体中居中流体图像 Div

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;
}

"Margin: auto" 什么都不做，因为所有内容的宽度都是可变的。在代码中，图像的左边缘 "NumberTwo" 位于页面中央。我希望图像的中心居中。它的行为与它应该按比例缩放一样，但不是在页面中间！

任何帮助将不胜感激，这让我很困惑。让我知道是否需要更多信息。

H

Answer 1

由于使用的是绝对位置，需要将top、right、left设置为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

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

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

演示：https://jsfiddle.net/3w5rqg3d/1/

Answer 3

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

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

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

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

无法在流体中居中流体图像 Div

Cannot center a fluid image in a fluid Div

html

css

layout

fluid