css响应式正方形居中

发表于 更新于 分类于 本文字数： 86 阅读时长 ≈ 1 分钟

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%);
}