Flexbox布局页面缩放时文本错位溢出问题求助

你的代码里有几个核心问题导致了布局错乱，下面直接给你修正后的代码，再拆解关键修改点：

修正后的CSS代码 #

html,
body {
  background-image: url('./pics-txt/group/Need2.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100vh; /* 用100vh确保占满视口高度，避免滚动条问题 */
  margin: 0;
  padding: 0;
  overflow: hidden; /* 防止视口外内容滚动 */
}

.filter {
  backdrop-filter: blur(2px);
  height: 100%;
  width: 100%;
  position: absolute; /* 让滤镜层铺满整个视口 */
  z-index: 1;
}

.container {
  display: flex;
  flex-direction: column; /* 内部元素垂直排列 */
  justify-content: center; /* 垂直方向居中 */
  align-items: center; /* 水平方向居中 */
  gap: 1rem; /* 元素之间的间距，替代手动padding */
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 40%;
  padding: 2rem; /* 用rem适配不同屏幕 */
  box-sizing: border-box; /* 让padding包含在宽度内，避免溢出 */
}

.item-group {
  display: flex;
  gap: 2rem; /* 三个item之间的间距 */
}

.item {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

#text {
  color: white;
  text-align: center;
  font-size: 1.8rem;
  margin: 0;
  overflow-wrap: break-word; /* 文本过长时自动换行，防止溢出 */
}

/* 修正媒体查询：用像素值作为断点，百分比无效 */
@media only screen and (max-width: 768px) {
  .container {
    width: 90%; /* 小屏幕用更宽的容器 */
  }
  #text {
    font-size: 1.4rem; /* 小屏幕缩小标题字号 */
  }
  .item-group {
    gap: 1rem; /* 小屏幕缩小item间距 */
  }
}

修正后的HTML代码 #

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- 修正拼写错误：hrrp → http -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./test-txt.css">
  <title>Tomorrow x Together</title>
</head>

<body>
  <div class="filter"></div>
  <div class="container">
    <div class="item-group"> <!-- 新增分组容器，方便用Flex布局三个item -->
      <div class='item'>MOA</div>
      <div class="item">Member</div>
      <div class="item">Big Hit</div>
    </div>
    <h1 id="text">Tomorrow x Together</h1>
  </div>
</body>

关键修改点拆解 #

1. 废弃错误的定位方式：删掉了.item和#text里的position: relative、left、top，改用Flexbox的justify-content和align-items实现居中，彻底避免缩放时的偏移问题。
2. 修正容器尺寸问题：给.container去掉了固定height，让内容自动撑开高度；添加box-sizing: border-box确保padding不会让容器宽度超出设定值。
3. 修复媒体查询：把无效的max-width:70%改成max-width:768px（移动端常见断点），同时针对小屏幕调整字号和间距，避免溢出。
4. 优化文本溢出：给#text加了overflow-wrap: break-word，确保长标题在窄屏幕上自动换行。
5. 修复HTML错误：删掉了多余的</video>标签，修正了http-equiv的拼写错误。

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