position fixed 居中
1、水平居中
.footer {
height: 10%;
text-align: center;
position: relative;
left: 50%;
transform: translate(-50%, -50%); /*水平居中*/
top: 30px;
}
2、垂直居中:
.footer {
height: 10%;
text-align: center;
position: fixed;
top: 50%;
transform: translate(-50%, -50%); /*水平居中*/
left: 30px;
}
3、万能居中法:
#name{
position:fixed;
left:50%;
top:50%;
transform:translate(-50%,-50%);
z-index:1000;
}
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
通常情况下,我们通过操作margin来控制元素居中,代码如下:
1 #name{ 2 maigin:0px auto; 3 }
但当我们把position设置为fixed时,例如:
1 #id{ 2 position:fixed; 3 margin:0px auto; 4 }
以上代码中的margin:0px auto;会出现失效问题,盒子并未居中。这是因为fixed会导致盒子脱离正常文档流。
解决方法非常简单,只要应用如下代码即可:
1 #name{ 2 position:fixed; 3 margin:0px auto; 4 right:0px; 5 left:0px; 6 }
若希望上下也可以居中,可采用如下代码:
1 #name{ 2 position:fixed; 3 margin:auto; 4 left:0; 5 right:0; 6 top:0; 7 bottom:0; 8 }
万能居中法(未知大小呦):
1 #name{ 2 position:fixed; 3 left:50%; 4 top:50%; 5 transform:translate(-50%,-50%); 6 z-index:1000; 7 }
不积跬步无以至千里,不积小流无以成江海