如何垂直居中响应式布局并修复移动端padding问题

问题1：游戏与文本整体未垂直居中 #

原因分析 #

当前.iframe-container设置了固定height: 80%，强制容器占据视口高度的80%，打破了flex布局的垂直居中逻辑——flex的justify-content: center需要基于容器内元素的总尺寸分配空间，固定高度的容器导致整体内容无法被正确居中。

修复方案 #

去掉.iframe-container的height: 80%，改用max-height: 80vh限制容器最大高度，让容器基于aspect-ratio: 3/4自适应尺寸；同时给body添加gap: 16px替代文本的padding-top，统一控制容器与文本的间距，确保flex布局能将整体内容垂直居中。

问题2：移动端左右内边距不生效 #

原因分析 #

给.iframe-container设置左右padding时，容器默认width: 100%会包含padding（未开启box-sizing: border-box），导致容器总宽度超过视口，同时aspect-ratio基于容器内容宽度计算高度，最终出现容器溢出、间距不生效的视觉效果。

修复方案 #

在媒体查询中，改用width: calc(100% - 100px)直接计算容器宽度（减去左右各50px的间距），或者设置margin: 0 50px，两种方式都能在不破坏容器尺寸逻辑的前提下，实现左右留边的需求。

修正后的完整代码 #

CSS代码 #

body {
  font-family: 'Times New Roman', serif;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  gap: 16px; /* 统一控制容器与文本的间距 */
  background-color: blue; /* 用CSS替代HTML的bgcolor属性，更规范 */
}

.iframe-container {
  aspect-ratio: 3 / 4;
  max-height: 80vh; /* 限制容器最大高度，避免超出视口 */
  width: 100%; /* 容器自适应宽度 */
  max-width: 600px; /* 可选：限制桌面端最大宽度，避免游戏过大 */
}

iframe {
  width: 100%;
  height: 100%;
  border: 5px inset silver; /* 内联样式移到CSS统一管理 */
}

#text {
  text-align: center;
  color: orange;
  margin: 0; /* 清除p标签默认margin，避免额外间距 */
}

/* Media query for smaller screens */
@media screen and (max-width: 600px) {
  #text {
    display: none;
  }
  .iframe-container {
    width: calc(100% - 100px); /* 左右各留50px间距 */
    /* 也可替换为：margin: 0 50px; 效果一致 */
  }
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Game test layout</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="iframe-container">
    <iframe src="https://rajeevbasu.com/projects/test/" allowfullscreen="true" scrolling="no" noresize="noresize"></iframe>
  </div>
  <div id="text">
    <p>Copyright information here 2024. <img src="images/button.png"> <img src="images/button.png"></p>
  </div>
</body>
</html>

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