html - html 外的空白

Question

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

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

/image/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>

Answer 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>