如何用Flexbox实现带背景图的div及内容页面居中并适配背景图

• 基础布局缺项：外层.flex_container没有设置撑满视口的高度，也没重置浏览器默认的8px body外边距，所谓的Flex居中只是在容器自身的内容高度范围内对齐，不是真正的页面视口级居中。
• 固定尺寸导致溢出：内层.inner直接写死了1400px宽度、788px高度，当浏览器视口比这个尺寸小时，整个div会直接超出视口边界被裁切——你看到的“背景不居中、显示不全”根本不是背景属性的问题，是整个内层div都没完全出现在视口里。
• 属性匹配偏差：用background-size: contain的逻辑是让背景图完整显示、适配元素短边，剩余区域留空，这也是为啥加了background-position: center后只露出半张图的原因。

替换原有样式即可实现预期效果：

/* 重置全局默认边距，消除不必要的布局偏移 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
}

.flex_container {
    display: flex;
    justify-content: center;
    align-items: center;
    /* 撑满整个视口高度，让align-items的垂直居中真正生效 */
    min-height: 100vh;
    /* 小屏下留边，避免内层元素贴到视口边缘 */
    padding: 16px;
}

.inner {
    /* 宽高保留原设计尺寸，但小屏时自动适配视口，不溢出 */
    width: min(1400px, 100%);
    height: min(788px, 100%);
    background-image: url('matrix_bg.png');
    /* 背景图完全铺满元素边界，不变形 */
    background-size: cover;
    background-repeat: no-repeat;
    /* 从元素中心开始裁切背景图，显示核心区域 */
    background-position: center center;
    color: white;
    display: flex;
    justify-content: center;
    /* 原来的文本上边距改成padding，避免margin穿透问题 */
    padding-top: 100px;
}

• 大屏状态下，内层div保持原设计的1400*788尺寸，在整个页面视口正中心展示
• 小屏状态下，内层div自动收缩适配视口尺寸，不会被裁切，不会出现只露出半张背景的问题
• 背景图完全撑满内层div的边界，裁切逻辑从中心开始，符合常规展示预期
• 原本的居中显示的文本位置保持不变，不会出现偏移

内容的提问来源于stack exchange，提问作者Andy Res