关于position:fixed;的居中问题？

有趣的灵魂 2022-09-09 15:55:10

通常情况下，我们通过操作margin来控制元素居中，代码如下：

name{maigin：0px auto;}

但当我们把position设置为fixed时，例如：

#id{position:fixed;margin:0px auto;}

以上代码中的margin:0px auto;会出现失效问题，盒子并未居中。这是因为fixed会导致盒子脱离正常文档流。
解决方法非常简单，只要应用如下代码即可：

#name{position:fixed;margin:0px auto;right:0px;left:0px;}

若希望上下也可以居中，可采用如下代码

#name{position:fixed;margin:auto;left:0;right:0;top:0;bottom:0;}

万能居中法(未知大小呦)：

#name{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1000;}

最后修改：2022-09-09 16:02:10