显示：表格不考虑宽度

Question

我需要通过使用display: table使内容集中在屏幕上

这是我的代码： JSFIDDLE

我需要使“桌子”适合所有屏幕。 但是如果centered大于屏幕，则桌子会变得太大而忘记height: 100% 。 如何使表格和centered不超过屏幕，如果更多则添加滚动条？

Answer 1

这是因为您已将.container的高度设置为100 px而不是100 ％ 。

您希望它在垂直和水平方向上居中，对吗？

Answer 2

据我了解您的问题，您有两种选择

• 添加另一个元素。 这是因为对于表格来说，高度实际上是最小高度，因此它将随着内容变高而增加，并且不考虑溢出属性。 因此，您的.container只是一个带有过多内容的块， .centered变得像表一样，新元素变成了表单元。

IE浏览器

    .container {
         display:block;
         position:relative;
         height:100%;
         overflow:auto;
    }
    .centered {
        display:table;
        width:100%;
        height:100%;
    }
    .centered p {
        display:table-cell;
        text-align:center;
        vertical-align:middle;
    }

范例： https ：//jsfiddle.net/1dosh3rp/3/

• 另一种选择是添加overflow:auto; 贴到您的身体标签上，使其像容器一样。

Answer 3

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

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

的CSS

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;
}