当使用 `diplay: table;` 将内容居中时，如何使填充按浏览器的宽度缩放？

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; 使 div 居中，而不是使用 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>

See fiddle here you can resize the viewable area and see the padding size change.

Answer 2

你应该使用 flex-box 使垂直居中。

html, body{
  height: 100%;
}

body{
  display: flex;
  flex-direction: column;
  justify-content: center
}

当使用 `diplay: table;` 将内容居中时，如何使填充按浏览器的宽度缩放？

How can I make to work padding, which is scaling by browser's width, when centered a content using `diplay: table;`?

html

css

centering