css响应式正方形居中

body -> div#box,body铺满屏幕,box是一个宽度为body一半的正方形,用css使box垂直水平居中。

padding百分比继承自父元素宽度,然后通过绝对定位和translate来实现。

1
2
3
<body>
<div class="box"></div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
body {
width: 100vw;
height: 100vh;
}
.box {
position: absolute;
padding: 25%;
background: red;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}