1. 程式人生 > >關於position:fixed;的居中問題

關於position:fixed;的居中問題

控制 top class gin 問題 pos 正常 當我 文檔

通常情況下,我們通過操作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 }

關於position:fixed;的居中問題