Question

我需要使用display: table

将内容置于屏幕中心

这是我的代码：JSFIDDLE

我需要制作＆＃34; table＆＃34;适合所有的屏幕。但是，如果centered不仅仅是屏幕，那么表格会变得很大并且会忘记height: 100%。我怎样才能使表格centered不超过屏幕并添加滚动条（如果更多）？

Answer 1

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

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

Answer 2

据我了解你的问题，你有两个选择

添加其他元素。这是因为对于表格高度实际上是一个最小高度，因此当内容变得更高并且不考虑溢出属性时它将增长。因此，.container变成了一个包含overfolw的块，.centered变成了表格式，新元素变成了表格单元格。

即

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

Exapmle：https://jsfiddle.net/1dosh3rp/3/

另一种选择就是将overflow:auto;添加到您的body标签中，使其像容器一样。

Answer 3

问题是你不能简单地将滚动添加到包含table-cell显示属性的元素，就像你不能直接添加滚动到表的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;
}

显示：表格不考虑宽度

3 个答案: