如何完全固定div盒子

Question

写了一个div盒子，里面放了一张图片，我想让这个盒子一直处在页面中间，不管鼠标上滑还是下滑，图片都不动，应该怎么写啊

Answer 1

可以使用CSS的position:fixed属性将div盒子固定在页面中间。

div{
    position:fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

上面的代码中，使用了top: 50%和left: 50%将div盒子的上边距和左边距设置为50%。这样div盒子就会出现在页面的中间。

使用了transform: translate(-50%, -50%)将div盒子向上和向左偏移50%。这样div盒子会完全居中。

这样设置之后，你可以看到div盒子一直处于页面中间，不管鼠标上滑还是下滑，图片都不动。