^As mentioned in the title^. I am looking to adjust padding based on the width of a browser. My attempt so far has been:
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>However, this method did not produce the desired outcome. Are there any alternative approaches that can achieve this? My goal is to centrally align the div element using display: table;, without resorting to flexbox or position: absolute. Thank you.