Html 显示：表格不显示'；我不尊重宽度

我需要使用

display:table

这是我的密码：

---

我需要使“桌子”适合所有屏幕。但若

居中

大于屏幕，表格就会变得太大，忘记了高度：100%。如何使表格和

居中

不超过屏幕，并在更多时添加滚动条？

这是因为您已将

.container

的高度设置为100px，而不是100%

---

你想让它垂直和水平居中都对吗？

据我所知，你有两个选择

• 添加另一个元素。 这是因为for tables height实际上是一个最小高度，所以它将随着内容变得更高而增长，并且不会考虑溢出属性。 因此，您的

  .container

  变成了一个覆盖的块，

  .centered

  变成了表格状，新元素变成了表格单元格

即

示例：

• 另一个选项是只添加

  溢出：auto到您的body标签，使其行为类似于容器
  

问题是，您不能简单地将scroll添加到包含表格单元格显示属性的元素，就像您不能直接将scroll添加到表格的td标记一样。您需要在其中添加另一个div并添加滚动条。使用

HTML

  <div class="container">
  <div class="centered">
    <div class="scrollable">   
      content<br>
      content<br>
      content<br>
      content<br>content<br>
      content<br>content<br>
      content<br>content<br>
      content<br>content<br>
      content<br>content<br>
      content<br>content<br>
      content<br>content<br>
      content<br>
      content<br>
      content<br>content<br>
      content<br>content<br>
      content<br>content<br>
      content<br>content<br>
      content<br>
    </div>
  </div>
  </div>

---

哦，打字错误。已修复，请参见编辑的问题。是的，我想水平和垂直居中，并使内容不超过屏幕大小（如果是，则添加滚动条）。我不确定您为什么认为表是这里的最佳构造。桌子对滚动条很挑剔。我不能使用flex或其他东西。它已经在中间了，还有滚动条？请说清楚一点。

  <div class="container">
  <div class="centered">
    <div class="scrollable">   
      content<br>
      content<br>
      content<br>
      content<br>content<br>
      content<br>content<br>
      content<br>content<br>
      content<br>content<br>
      content<br>content<br>
      content<br>content<br>
      content<br>content<br>
      content<br>
      content<br>
      content<br>content<br>
      content<br>content<br>
      content<br>content<br>
      content<br>content<br>
      content<br>
    </div>
  </div>
  </div>

html,
body
{
  height: 100%;
  width: 100%;
  margin: 0;
}

body
{
  overflow: visible;
  box-sizing: border-box;
  border: 2px solid black;
}

.container
{
  height:100%;
  width: 100%;
  display: table;
  position: relative;
  overflow: hidden;
  border: 1px solid black;
  box-sizing: border-box;
}

.centered
{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  overflow: hidden;
}

.scrollable {
  width: 100%;
  height: 100%;
  overflow: auto;
}