在網(wǎng)頁(yè)開(kāi)發(fā)的世界里，JS 居中可是個(gè) “香餑餑”。想象一下，當(dāng)你打開(kāi)一個(gè)網(wǎng)頁(yè)，彈窗廣告不偏不倚地出現(xiàn)在屏幕正中央，是不是一下子就抓住了你的眼球？這就是 JS 居中在提升用戶體驗(yàn)上的魔力。再說(shuō)說(shuō)那些電商網(wǎng)站的商品展示圖片，通過(guò) JS 實(shí)現(xiàn)居中放大效果，讓咱們能舒舒服服地查看商品細(xì)節(jié)，購(gòu)物欲望 “蹭蹭” 就上來(lái)了。還有網(wǎng)頁(yè)中的各類按鈕，居中排列，手指點(diǎn)擊起來(lái)特別順手，操作流暢度滿分。從適配多設(shè)備的角度看，如今手機(jī)、平板、電腦屏幕五花八門。一個(gè)在電腦大屏上看著很和諧的網(wǎng)頁(yè)，到了手機(jī)小屏幕上，要是元素沒(méi)居中，那簡(jiǎn)直亂成一鍋粥。而 JS 居中能動(dòng)態(tài)計(jì)算，不管啥尺寸屏幕，都讓內(nèi)容在最合適的位置顯示，就像為每個(gè)設(shè)備量身定制一樣。在視覺(jué)引導(dǎo)方面，居中有很強(qiáng)的聚焦作用。比如說(shuō)，一個(gè)網(wǎng)站的注冊(cè)登錄框居中顯示，周圍輔以簡(jiǎn)潔的背景和引導(dǎo)文字，用戶無(wú)需費(fèi)勁尋找，目光自然而然就被吸引過(guò)去，輕松開(kāi)啟操作流程，大大提升了交互效率。

常見(jiàn)的 JS 居中方法大揭秘

利用 CSS 樣式實(shí)現(xiàn)居中

這可是最常用的 “招數(shù)” 之一。咱們先來(lái)說(shuō)說(shuō)絕對(duì)定位搭配負(fù)邊距的法子。給元素設(shè)置 “position: absolute;”，讓它脫離文檔流，然后 “top: 50%; left: 50%;”，這就把元素的左上角挪到了父容器的中心。但別急，這還沒(méi)真正居中呢，得把元素往回拉一半，所以要設(shè)置 “margin-top: -（元素高度的一半）; margin-left: -（元素寬度的一半）;”。比如說(shuō)，有個(gè)彈窗組件，彈窗內(nèi)容的盒子就可以這么設(shè)置樣式，代碼如下：這種方法兼容性不錯(cuò)，老瀏覽器也能 “吃得消”，可缺點(diǎn)就是得提前知道元素的尺寸，要是元素尺寸動(dòng)態(tài)變化，那就麻煩了。再講講 Flexbox 布局，這在現(xiàn)代網(wǎng)頁(yè)開(kāi)發(fā)里超級(jí)火。給父容器設(shè)置 “display: flex;”，開(kāi)啟彈性布局，接著 “justify-content: center;” 讓子元素在水平方向居中，“align-items: center;” 負(fù)責(zé)垂直方向居中。像網(wǎng)頁(yè)的導(dǎo)航欄，里面的菜單列表用 Flexbox 居中就特別方便：用 Flexbox 的好處顯而易見(jiàn)，代碼簡(jiǎn)潔，自適應(yīng)能力強(qiáng)，不管子元素多少、尺寸咋變，都能穩(wěn)穩(wěn)居中。不過(guò)呢，要兼容老掉牙的 IE 瀏覽器（IE9 及以下），就有點(diǎn)費(fèi)勁了。還有 Grid 布局，它也是 CSS3 的 “得力干將”。把父容器設(shè)為 “display: grid;”，再用 “place-items: center;”，這相當(dāng)于 “justify-content: center;” 和 “align-items: center;” 的合體，直接讓子元素在水平和垂直方向都居中。比如網(wǎng)頁(yè)里的圖片展示區(qū)，用 Grid 布局居中圖片：Grid 布局在二維布局上特別有優(yōu)勢(shì)，能輕松打造復(fù)雜又規(guī)整的排版。缺點(diǎn)嘛，和 Flexbox 類似，對(duì)低版本 IE 不太友好。

HTML 表格元素輔助居中

在一些簡(jiǎn)單場(chǎng)景下，HTML 表格元素能幫上大忙。咱們可以利用表格的天然居中特性，像這樣：這里的表格撐滿整個(gè)父容器，單元格里的內(nèi)容自動(dòng)在水平和垂直方向居中。要是做個(gè)小型活動(dòng)頁(yè)，頁(yè)面中間就放個(gè)大大的按鈕，用表格來(lái)居中按鈕，代碼量少，效果立竿見(jiàn)影。但它的局限性也不小，表格布局語(yǔ)義性不強(qiáng)，不符合現(xiàn)代 HTML 結(jié)構(gòu)與樣式分離的理念，而且一旦頁(yè)面結(jié)構(gòu)復(fù)雜起來(lái)，維護(hù)成本飆升，容易亂成一團(tuán)麻。

純 JavaScript 腳本搞定居中

要是遇到一些特殊需求，CSS 布局搞不定，就得靠 JavaScript 上場(chǎng)了。比如說(shuō)，要實(shí)現(xiàn)一個(gè)可拖動(dòng)的彈窗，彈窗在拖動(dòng)結(jié)束后得重新居中。這時(shí)候，咱們先用 JavaScript 獲取頁(yè)面可視區(qū)域的寬度和高度，再拿到彈窗元素的寬度和高度，通過(guò)計(jì)算賦值給彈窗的 “l(fā)eft” 和 “top” 屬性：還有動(dòng)態(tài)生成的元素，像用戶點(diǎn)擊按鈕后才出現(xiàn)的提示框，也得用 JavaScript 來(lái)居中。先監(jiān)聽(tīng)按鈕點(diǎn)擊事件，創(chuàng)建提示框元素后，同樣計(jì)算位置居中顯示。雖然這種方法靈活性超高，能應(yīng)對(duì)各種奇葩需求，但代碼復(fù)雜度增加，要是計(jì)算有誤，元素可能就 “跑偏” 了，而且頻繁操作 DOM，性能上也得悠著點(diǎn)，別讓頁(yè)面卡頓了。

不同類型元素的 JS 居中實(shí)戰(zhàn)

文本元素居中

對(duì)于文本元素，咱們常用的 CSS 屬性有 “text-align: center;”，它能輕松實(shí)現(xiàn)文本的水平居中。可要是想垂直居中呢？這時(shí)候 “l(fā)ine-height” 屬性就登場(chǎng)啦。要是文本所在容器高度固定，把 “l(fā)ine-height” 設(shè)成和容器高度一樣，文本就垂直居中了。像網(wǎng)頁(yè)的標(biāo)題，一般在一個(gè)固定高度的 header 區(qū)域里，這么設(shè)置：要是文本內(nèi)容是動(dòng)態(tài)變化的，比如用戶評(píng)論區(qū)的每條評(píng)論，長(zhǎng)度不一，咱們就得靠 JavaScript 來(lái)動(dòng)態(tài)調(diào)整了。先獲取文本元素的寬度，再和父容器寬度對(duì)比，算出差值，調(diào)整 “margin-left” 或 “padding-left”，讓文本始終在水平方向看著和諧。代碼大概像這樣：這樣，不管評(píng)論是長(zhǎng)是短，都能在各自的小天地里 “排排站”，居中顯示，美觀又大方。

圖片元素居中

圖片居中有點(diǎn)小復(fù)雜。要是用 CSS 背景圖的方式，給容器設(shè) “background-image”，再用 “background-position: center;”“background-repeat: no-repeat;”，圖片就居中顯示了。但這種適合圖片作為裝飾背景的時(shí)候，要是圖片是主要內(nèi)容，還得用其他招。用 JavaScript 直接操作圖片位置，先等圖片加載完（用 “img.onload” 事件），獲取圖片的寬度和高度，還有父容器的寬高，通過(guò)計(jì)算設(shè)置圖片的 “l(fā)eft” 和 “top” 屬性。像圖片展示區(qū)，代碼如下：要是追求極致性能，還得考慮瀏覽器重繪和回流。頻繁操作 DOM 改變圖片位置，會(huì)引發(fā)這些問(wèn)題，讓頁(yè)面卡頓。所以盡量把多次操作合并，或者用 “requestAnimationFrame” 函數(shù)，讓圖片位置更新在下一幀繪制前統(tǒng)一處理，這樣頁(yè)面就順滑多啦。

DIV 等塊狀元素居中

塊狀元素像 DIV，可是網(wǎng)頁(yè)布局的 “主力軍”。常規(guī)的方法，給 DIV 設(shè) “margin: 0 auto;” 能實(shí)現(xiàn)水平居中，前提是得有寬度，它在父容器里自動(dòng)分配左右外邊距，就居中啦。但垂直居中就沒(méi)這么簡(jiǎn)單。用絕對(duì)定位加負(fù)邊距的方法前面提過(guò)，這里再細(xì)化下。對(duì)于動(dòng)態(tài)生成的彈窗 DIV，在顯示的時(shí)候，用 JavaScript 獲取它和父容器的尺寸，動(dòng)態(tài)設(shè)置 “top”“l(fā)eft” 以及負(fù)邊距：還有 “transform” 屬性這個(gè)神器，給塊狀元素設(shè) “position: absolute; top: 50%; left: 50%;” 后，再用 “transform: translate (-50%, -50%);”，它能根據(jù)元素自身寬高把元素往回拉一半，達(dá)到居中。和負(fù)邊距比起來(lái)，它不影響其他元素布局，性能上也有優(yōu)勢(shì)，是現(xiàn)在很流行的居中妙招。

那些容易踩的坑，你中招了沒(méi)？

雖說(shuō) JS 居中方法不少，但要是不小心，“坑” 就在腳下。瀏覽器兼容性問(wèn)題首當(dāng)其沖，前面提到的 Flexbox、Grid 布局在 IE 低版本里就 “水土不服”。要是網(wǎng)站面向的用戶群體還在用老 IE，那可得斟酌下布局方式，要么犧牲點(diǎn)代碼簡(jiǎn)潔性，用兼容性好的老方法；要么在低版本 IE 里單獨(dú)加載不同樣式，給用戶個(gè)勉強(qiáng)能看的界面。元素尺寸動(dòng)態(tài)變化也是個(gè) “大麻煩”。想象下，一個(gè)可縮放的圖片容器，圖片變大變小，原本居中的樣式瞬間 “崩塌”。這時(shí)候，得靠 JavaScript 實(shí)時(shí)監(jiān)聽(tīng)尺寸變化，重新計(jì)算居中位置。但頻繁計(jì)算又可能引發(fā)性能問(wèn)題，所以得優(yōu)化算法，像設(shè)置防抖節(jié)流，別讓頁(yè)面跟著元素尺寸 “抽風(fēng)”。滾動(dòng)條的出現(xiàn)有時(shí)也會(huì)搞亂布局。頁(yè)面內(nèi)容增多，滾動(dòng)條 “冒出來(lái)”，原本居中的元素可能就被擠偏了。解決辦法有，用 CSS 預(yù)留滾動(dòng)條空間，或者用 JavaScript 判斷滾動(dòng)條狀態(tài)，動(dòng)態(tài)調(diào)整元素位置。舉個(gè)例子，在一個(gè)信息流頁(yè)面，加載更多內(nèi)容時(shí)，滾動(dòng)條出現(xiàn)，通過(guò)監(jiān)聽(tīng)滾動(dòng)條事件，把主體內(nèi)容的邊距微調(diào)，讓頁(yè)面始終穩(wěn)穩(wěn)當(dāng)當(dāng)，不出現(xiàn) “抖動(dòng)” 現(xiàn)象。

總結(jié)

咱們一路探索下來(lái)，JS 居中的門道可真不少。從基礎(chǔ)的 CSS 布局法，像絕對(duì)定位搭配負(fù)邊距的 “穩(wěn)扎穩(wěn)打”，到 Flexbox、Grid 布局的 “靈動(dòng)飄逸”，各有千秋；還有 HTML 表格元素這種 “簡(jiǎn)單粗暴” 的輔助手段，以及純 JavaScript 腳本 “無(wú)所不能” 的精準(zhǔn)操控。不同類型元素，文本、圖片、DIV 等，居中方法也得 “因材施教”。在實(shí)戰(zhàn)過(guò)程中，雖然 “坑” 多，但 “填坑” 技巧也多。兼容性問(wèn)題就找墊片腳本、多版本適配；尺寸動(dòng)態(tài)變化上防抖節(jié)流來(lái)救場(chǎng)；滾動(dòng)條搗亂就 CSS、JS 齊上陣?？傊?，掌握好 JS 居中，就像給網(wǎng)頁(yè)開(kāi)發(fā)這個(gè)大工程添了一把 “萬(wàn)能鑰匙”。大家趕緊動(dòng)手試試，把學(xué)到的方法用到實(shí)際項(xiàng)目里，讓網(wǎng)頁(yè)顏值飆升，用戶體驗(yàn)爆棚。要是在實(shí)踐中又發(fā)現(xiàn)啥新妙招、新問(wèn)題，別忘了來(lái)交流分享，咱們一起在前端開(kāi)發(fā)的路上越走越遠(yuǎn)，越走越順！