求助：无法实现包含子div的#center div响应式居中

嘿，我来帮你搞定这个#center div居中+适配屏幕的问题！这种情况大概率是布局上下文没设置对，或者宽度用了固定值导致适配失效，我给你几个靠谱的解决方案，都是现在前端常用的方法：

先说说常见的错误原因（对应你可能的代码问题） #

比如你可能给#center设了固定宽度（像width:900px），或者body没有占满视口高度导致垂直居中失效，又或者没用到合适的居中布局方式。

方法1：Flexbox（最推荐，适配性拉满） #

这是现代前端最常用的布局方案，轻松实现水平+垂直居中，还完美适配各种屏幕：

/* 修改body的CSS */
body {
  margin: 0;
  padding: 0;
  min-height: 100vh; /* 让body占满整个视口高度，避免内容少的时候居不上 */
  display: flex;
  justify-content: center; /* 水平方向居中 */
  align-items: center; /* 垂直方向居中 */
}

/* 修改#center的CSS */
#center {
  width: 90%; /* 用百分比适配小屏幕 */
  max-width: 900px; /* 大屏幕时最大宽度限制在900px，避免太宽 */
  min-height: 500px; /* 保证最小高度，也可以设height:auto随内容变化 */
  background: #eee;
  padding: 20px; /* 加内边距让内容不贴边，体验更好 */
}

为啥好用？ Flexbox兼容性几乎覆盖所有现代浏览器，代码简洁，不管屏幕怎么变，#center都会稳稳居中，宽度自动适配。

方法2：传统margin:auto（适合只需要水平居中的场景） #

如果你只需要水平居中，或者要兼容极老的浏览器，这个方法很稳妥：

body {
  margin: 0;
  padding: 0;
}

#center {
  width: 90%;
  max-width: 900px;
  margin: 0 auto; /* 左右margin自动均分，实现水平居中 */
  min-height: 500px;
  background: #eee;
  padding: 20px;
}

注意：这个方法只能实现水平居中，如果需要垂直居中，得额外给body加height:100vh，再配合绝对定位+transform，但不如Flexbox方便。

方法3：Grid布局（更简洁的现代方案） #

和Flexbox类似，Grid用一行代码就能搞定双方向居中，代码更简洁：

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: grid;
  place-items: center; /* 同时实现水平+垂直居中，是align-items+justify-items的简写 */
}

#center {
  width: 90%;
  max-width: 900px;
  min-height: 500px;
  background: #eee;
  padding: 20px;
}

几个关键提醒 #

1. 一定要给body加min-height:100vh，否则页面内容少的时候，body高度不够，垂直居中就会失效
2. 别给#center设固定死的宽度（比如width:900px），要用相对单位或者配合max-width，这样才能适配不同屏幕
3. 如果#center里的内容太多，记得加overflow:auto，让内容超出时出现滚动条，避免撑破布局

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