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

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

1 #name{ 2maigin：0px auto; 3 }

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

1 #id{ 2position:fixed; 3margin:0px auto; 4 }

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

1 #name{ 2position:fixed; 3margin:0px auto; 4right:0px; 5left:0px; 6 }

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

1 #name{ 2position:fixed; 3margin:auto; 4left:0; 5right:0; 6top:0; 7bottom:0; 8 }

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

1 #name{ 2position:fixed; 3left:50%; 4top:50%; 5transform:translate(-50%,-50%); 6z-index:1000; 7 }

【关于position:fixed; 的居中问题】转载于:https://www.cnblogs.com/zywaf/p/7217102.html

关于position:fixed;的居中问题