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 }
复制代码

 




posted on 2018-10-30 15:46  小甜瓜安东泥  阅读(2330)  评论(0编辑  收藏  举报