postion:fixed;表頭設定fixed且希望無論視窗大小都置中的作法

小正正網站有實作範例,先看範例:上下左右都置中的區塊。簡單說明實作方法(因為我要處理的主要是左右置中,上下置中的理論相同就不重複。

  1. 由於fixed的定位是認瀏覽器,而不認父元素的position,所以先使用left:50%的方式。讓定位點定在瀏覽器的中間(也就是不管螢幕放到縮小,物件都會固定在瀏覽器的中間。
  2. 然後再使用margin-left,設定負值拉回。因為如果畫面都要置中,一定都會將要置中的物件設定一個寬度,例如1000px,那這個時候只要向左拉回500px即可。
  3. 因為我要處理的header我希望他寬度可以延伸,所以我設定的時候把總寬設定成2000px,因此往左要拉回1000px。

小正正有提供positioniseverything的網站,很值得參考喔!