Question

我已经看到有些人这样做，但它看起来并不相同我想在屏幕中间将这个基于百分比的div居中并使其响应。我做了修复，但响应会更好吗？高度百分比= 50％宽度= 60％

Answer 1

使用transform。它允许您在不知道其尺寸的情况下将所有内容集中在一起。

＆＃13;

 /** that's the trick **/
.centered {  
  position: fixed;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}


/* only for snippet **/
.yellow {
  background:yellow;
  width: 200px;
  height: 300px;
  z-index: 1;
}
.red {
  z-index:0;
  background:red;
  width: 50%;
  height: 60%;
}

＆＃13;

<div class="centered yellow"></div>
<div class="centered red"></div>

＆＃13;

Answer 2

left: 20%;
top: 25%;

这仅在周围容器（正文？）具有有效height和width设置时才有效

以百分比为基础的元素

2 个答案: