html - 调整页面大小时使 DIV 居中但带有滚动条

Question

我有一个 DIV，我需要它在页面中保持居中，即使在调整页面大小时也是如此。

我目前已达到 top:50%； left:50%，顶部和左侧边距等于 DIV 尺寸的一半，如下所示:

.centered {
  width: 500px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -250px;
  margin-top: -100px;
}

但是，当页面小于 500x200 时，div 的左侧被截断，并且没有滚动条可以看到它的内容。

DEMO

如何添加滚动条以便您可以看到 DIV 的所有内容？

谢谢

Answer 1

因为你的元素有 position : absolute，它被切断了正常的页面渲染流程，所以没有 JavaScript 就无法添加滚动条。