cangkukuaimanle——你滿了麼
阿新 • • 發佈：2018-12-31
網頁中如下圖，需要在頁面底部中間固定一個塊，當然用positon:fixed來控制，然後bottom:0px;能讓其在底部，但是在中間怎麼處理呢？
最先想到的是用js或者jquery算螢幕的寬度A，然後減去紅色框的寬度B，那麼它的left值為(A-B)/2 px;
其實有更簡單的，只需要css來控制，程式碼如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> .test { border:1px solid red; position:fixed; bottom:0px; bottom:0px; left:0px; right:0px; margin:auto auto; height:50px; width:200px; } </style> </head> <body> <div class="test"></div> </body> </html>
重要之處就是left:0px;right:0px;margin:auto auto;
經測試在ie8、9、10，chrom、firefox中均正常