当使用"diplay：表格"居中内容时，我如何使填充工作，即按浏览器的宽度缩放？

Question

^如标题所说^。我需要按浏览器的宽度来扩展填充。我尝试了：

html, body{
  height: 100%;
}
body{
  display: table;
  margin: 0 auto;
}
#center{
  display: table-cell;
  vertical-align: middle;
}
.box{
  padding: 25%;
  background: #000;
  color: white;
}
h1{
  margin: 0;
  padding: 0;
}

<div id="center">
  <div class="box">
    <h1>Hello world</h1>
  </div>
</div>

但行不通。我有什么办法可以做到吗？我想使用display: table;中心，而不是使用FlexBox或position: absolute。谢谢。

Answer 1

使用vw，是视口宽度的百分比。

html, body{
  height: 100%;
}
body{
  display: table;
  margin: 0 auto;
}
#center{
  display: table-cell;
  vertical-align: middle;
}
.box{
  padding: 5vw;
  background: #000;
  color: white;
}
h1{
  margin: 0;
  padding: 0;
}

<div id="center">
  <div class="box">
    <h1>Hello world</h1>
  </div>
</div>

请参阅这里的小提琴，您可以调整可见区域的大小，并查看填充尺寸更改。

Answer 2

您应该使用flex-box垂直中心。

html, body{
  height: 100%;
}
body{
  display: flex;
  flex-direction: column;
  justify-content: center
}