html 外的空白区域答案

【问题标题】：White space outside the htmlhtml 外的空白区域
【发布时间】：2019-09-25 13:25:21
【问题描述】：

我有一个简单的 div，它应该位于屏幕的中心。相同的代码在 Chrome、Firefox 中有效，但在 IE11 和 Microsoft Edge 中的 html 周围会生成一个空格。

请提供除将溢出设置为隐藏之外的任何解决方法。我的内容可能会垂直溢出。

https://i.stack.imgur.com/ayi34.png

body {
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: blue;
}

.inner {
  position: absolute;
  width: 200px;
  height: 300px;
  background-color: red;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

【问题讨论】：

尝试在 * 上添加 box-sizing ：css-tricks.com/box-sizing
@Riskbreaker 不起作用。

标签： html css internet-explorer

【解决方案1】：

使用 flexbox，这是我在 IE11 中测试的示例，因此它应该适用于所有受支持的浏览器。我为最大尺寸添加了边距，因此红色框不会占据整个屏幕，如果您不关心它，可以将其删除。如果您想要默认的最小尺寸，我还将您的高度和宽度转换为最小高度和最小宽度。

body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
  background-color: blue;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
}

.inner {
  min-width: 200px;
  min-height: 300px;
  background-color: red;
  margin: 4em;
}

<div class="container">
  <div class="inner">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    </p>
  </div>
</div>

【讨论】：

如果容器是图像并且你必须在中心放置一个div，你如何处理
这听起来不是一个好主意，浏览器不擅长调整图像大小，那么当窗口太小而无法显示完整图像时会发生什么？如果窗口太大并且图像周围有一堆空白会发生什么？您可以做的是将容器 div 的背景颜色设置为黑色，然后将容器的背景图像设置为您想要显示的图像，但这不会解决我指出的问题。

【解决方案2】：

您提供的代码 sn-p 不会重现该问题。它只显示红色的div。你想要内红div在外蓝div的中心吗？我做了一个演示，它可以在 IE 11 和 Edge 中运行，你可以检查一下：

body {
  margin: 0;
  padding: 0;
}

.container {
  text-align: center;
  width: 100%;
  height: 100%;
  background-color: blue;
}

.inner {
  display: inline-block;
  vertical-align: middle;
  width: 200px;
  height: 300px;
  background-color: red;
  margin: 4em;
}

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

【讨论】：