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%);
}
长期招前端,欢迎投喂简历。 jake.laoyu@gmail.com
Disqus 加载中...

如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理