如何居中90%宽高的全屏div并消除多余滚动条？

这个问题我之前也碰到过！主要是浏览器的默认样式和你的定位方式组合导致了多余滚动条，下面给你两种实用的解决思路：

问题根源分析 #

• 浏览器默认给<body>元素添加了8px左右的默认margin，当你给html, body设置width: 100%; height: 100%;时，这个margin会让body的实际尺寸超出视口，直接触发滚动条。
• 你原代码中用top: 5%结合相对定位的方式，虽然数值上5%+90%=100%，但结合body的默认边距，还是会导致布局溢出。

方案一：使用Flex布局（推荐，简洁现代） #

Flex布局是目前实现居中最省心的方式，不需要复杂定位，还能自动适配各种场景：

html, body {
  width: 100%;
  height: 100%;
  margin: 0; /* 清除浏览器默认margin */
  padding: 0; /* 清除默认padding */
}
.outer {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
.inner {
  height: 90%;
  width: 90%;
  background: red;
}

对应的HTML保持不变：

<div class="outer">
  <div class="inner">
  </div>
</div>

方案二：修复原定位思路（不使用Flex） #

如果你想保留原有的定位逻辑，只需要清除默认边距，同时改用绝对定位实现精准居中：

html, body {
  width: 100%;
  height: 100%;
  margin: 0; /* 清除默认margin */
  padding: 0;
}
.outer {
  height: 100%;
  width: 100%;
  position: relative; /* 作为绝对定位的参考容器 */
}
.inner {
  height: 90%;
  width: 90%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 偏移自身一半，实现完美居中 */
  background: red;
}

这样调整后，既实现了90%宽高的div居中，又不会出现多余的滚动条。

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