Html 页面中背景图像居中的div_Html_Css_Flexbox

Html 页面中背景图像居中的div

html css

Html 页面中背景图像居中的div,html,css,flexbox,Html,Css,Flexbox,我想把一个div放在中间，它的内容放在页面的中心。div有一个背景图像这是我对Flexbox的尝试： <head> <style> .flex_container { display: flex; flex-direction: row; justify-content: center; align-items: center; }

我想把一个div放在中间，它的内容放在页面的中心。div有一个背景图像

这是我对Flexbox的尝试：

<head>
    <style>
        .flex_container {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .inner {
            height: 788px;
            width: 1400px;
            background-image: url('matrix_bg.png');
            background-size: contain;
            background-repeat: no-repeat;
            color: white;
            display: flex;
            justify-content: center;
        }
    </style>
</head>

<div class="flex_container">
   <div class="inner">
      <div style="margin-top: 100px;"> Some text in the center </div>
   </div>
</div>


.flex_容器{
显示器：flex；
弯曲方向：行；
证明内容：中心；
对齐项目：居中；
}
.内部{
高度：788px；
宽度：1400px；
背景图片：url（'matrix_bg.png'）；
背景尺寸：包含；
背景重复：无重复；
颜色：白色；
显示器：flex；
证明内容：中心；
}
中间有一些文字

结果如下：

如您所见，内部文本在页面中居中显示-这是我想要的，但我也希望背景图像也居中

有什么建议吗

更新：我尝试了一些建议，但没有达到预期效果：

背景位置为

中心：除了只显示图像的一部分外，这张看起来不错。我希望图像缩放到适合父级div的范围内。

使用背景尺寸：封面：这将是完美的，除非图像仍然没有居中。
您可以使用背景位置：中心属性以使图像居中
最新答复：


.flex_容器{
显示器：flex；
弯曲方向：行；
证明内容：中心；
对齐项目：居中；
}
.内部{
高度：100vh；
宽度：100vw；
背景图像：url（'https://effortcatalyst.online/matrix_bg.png');
背景尺寸：封面；
颜色：白色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
中间有一些文字
您的div已经在中间。由于div的宽度大于image，并且您使用了background size:contain，因此它没有按应有的方式显示
您可以使用：
background-position: center;

或
否则，您还可以减小内部div的宽度


.flex_容器{
显示器：flex；
弯曲方向：行；
证明内容：中心；
对齐项目：居中；
}
.内部{
高度：300px；
宽度：400px；
背景图像：url（'https://effortcatalyst.online/matrix_bg.png');
背景尺寸：封面；
颜色：白色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
中间有一些文字
查看我的更新答案，我尝试了你的建议，但仍然没有得到预期的结果。请尝试运行上述代码段。这一次我使用了一个图像。看到我更新的答案，我尝试了你的建议，但仍然没有得到想要的结果。问题是你的div只占用了你为.internal类设置的空间。我已经更新了我的答案，其中我使用了100vh和100vw的全高和全宽，就像你想要的
background-size:cover;