為什麼「margin: auto」不能與絕對定位的元素一起使用？
發佈於2024-11-16
瀏覽：685
了解絕對定位邊距自動問題
當將“position:absolute”應用於具有“margin-left:auto”和“的元素時margin-right: auto”，您可能會注意到邊距似乎沒有效果。此行為不同於“位置：相對”，其中邊距按預期工作。為了理解這種差異，讓我們更深入地研究底層機制。
當一個元素被絕對定位時，它就會從文件的正常流程中刪除。這意味著它不再與其相鄰元素交互，並且其大小僅由其顯式尺寸或其容器的大小決定。因此，如果未明確設定元素的寬度，則瀏覽器計算的值為“auto”，在大多數情況下為 0。
在這種情況下，應用「margin-left: auto」和「margin-right: auto」嘗試透過將左右邊距設定為元素寬度的一半來在元素周圍建立空間。但是，由於元素的計算寬度為 0，因此計算出的邊距值也變成 0。這就是為什麼邊距似乎沒有效果。
相反，當使用「position:relative」時，元素仍保持在文件的正常流程中。它的大小由它的內容和它在流中佔據的空間決定。當應用「margin-left: auto」和「margin-right: auto」時，邊距是根據元素的實際寬度計算的，在這種情況下，實際寬度不為零。因此，邊距被正確應用，導致元素在其包含元素內居中。
要讓絕對定位的元素居中，您可以指定其寬度和高度，然後使用“position:absolute;left:50” %; 變換: 翻譯(-50%, -50%);"將其置於容器的中心。
最新教學
更多>
-
為什麼不````''{margin：0; }`始終刪除CSS中的最高邊距？在CSS 問題：不正確的代碼： 全球範圍將所有餘量重置為零，如提供的代碼所建議的，可能會導致意外的副作用。解決特定的保證金問題是更建議的。 例如，在提供的示例中，將以下代碼添加到CSS中，將解決餘量問題： body H1 { 保證金頂：-40px; } 此方法更精確，避免了由全局保證金重置...程式設計 發佈於2025-07-13 -
圖片在Chrome中為何仍有邊框？ `border: none;`無效解決方案在chrome 在使用Chrome and IE9中的圖像時遇到的一個頻繁的問題是圍繞圖像的持續薄薄邊框，儘管指定了圖像，儘管指定了;和“邊境：無；”在CSS中。要解決此問題，請考慮以下方法： Chrome具有忽略“ border：none; none;”的已知錯誤，風格。要解決此問題，請使用以下...程式設計 發佈於2025-07-13
-
\“（1）vs.（;;）：編譯器優化是否消除了性能差異？\”答案： 在大多數現代編譯器中，while（1）和（1）和（;;）之間沒有性能差異。編譯器： perl： 1 輸入 - > 2 2 NextState（Main 2 -E：1）V-> 3 9 Leaveloop VK/2-> A 3 toterloop（next-> 8 last-> 9 ...程式設計 發佈於2025-07-13
-
Java中Lambda表達式為何需要“final”或“有效final”變量？Lambda Expressions Require "Final" or "Effectively Final" VariablesThe error message "Variable used in lambda expression shou...程式設計 發佈於2025-07-13
-
解決MySQL插入Emoji時出現的\\"字符串值錯誤\\"異常Resolving Incorrect String Value Exception When Inserting EmojiWhen attempting to insert a string containing emoji characters into a MySQL database us...程式設計 發佈於2025-07-13
-
反射動態實現Go接口用於RPC方法探索在GO 使用反射來實現定義RPC式方法的界面。例如，考慮一個接口，例如：鍵入myService接口{ 登錄（用戶名，密碼字符串）（sessionId int，錯誤錯誤） helloworld（sessionid int）（hi String，錯誤錯誤） } 替代方案而不是依靠反射...程式設計 發佈於2025-07-13
-
為什麼Microsoft Visual C ++無法正確實現兩台模板的實例？在Microsoft Visual C 中，Microsoft consions用戶strate strate strate strate strate strate strate strate strate strate strate strate strate strate strate st...程式設計 發佈於2025-07-13
-
如何在其容器中為DIV創建平滑的左右CSS動畫？通用CSS動畫，用於左右運動 ，我們將探索創建一個通用的CSS動畫，以向左和右移動DIV，從而到達其容器的邊緣。該動畫可以應用於具有絕對定位的任何div，無論其未知長度如何。 問題：使用左直接導致瞬時消失 更加流暢的解決方案：混合轉換和左 [並實現平穩的，線性的運動，我們介紹了線性的轉換。...程式設計 發佈於2025-07-13
-
FastAPI自定義404頁面創建指南response = await call_next(request) if response.status_code == 404: return RedirectResponse("https://fastapi.tiangolo.com") else: ...程式設計 發佈於2025-07-13
-
在GO中構造SQL查詢時，如何安全地加入文本和值？在go中構造文本sql查詢時，在go sql queries 中，在使用conting and contement和contement consem per時，尤其是在使用integer per當per當per時，per per per當per. 在GO中實現這一目標的慣用方法是使用fmt.spr...程式設計 發佈於2025-07-13
-
如何有效地轉換PHP中的時區？在PHP 利用dateTime對象和functions DateTime對象及其相應的功能別名為時區轉換提供方便的方法。例如： //定義用戶的時區 date_default_timezone_set（'歐洲/倫敦'）; //創建DateTime對象 $ dateTime = ne...程式設計 發佈於2025-07-13
-
如何在JavaScript對像中動態設置鍵？在嘗試為JavaScript對象創建動態鍵時，如何使用此Syntax jsObj['key' i] = 'example' 1;不工作。正確的方法採用方括號： jsobj ['key''i] ='example'1; 在JavaScript中，數組是一...程式設計 發佈於2025-07-13
-
編譯器報錯“usr/bin/ld: cannot find -l”解決方法錯誤：“ usr/bin/ld：找不到-l “ 此錯誤表明鏈接器在鏈接您的可執行文件時無法找到指定的庫。為了解決此問題，我們將深入研究如何指定庫路徑並將鏈接引導到正確位置的詳細信息。 添加庫搜索路徑的一個可能的原因是，此錯誤是您的makefile中缺少庫搜索路徑。要解決它，您可以在鏈接器命令中添...程式設計 發佈於2025-07-13
-
如何實時捕獲和流媒體以進行聊天機器人命令執行？在開發能夠執行命令的chatbots的領域中，實時從命令執行實時捕獲Stdout，一個常見的需求是能夠檢索和顯示標準輸出（stdout）在cath cath cant cant cant cant cant cant cant cant interfaces in Chate cant inter...程式設計 發佈於2025-07-13
-
PHP未來：適應與創新PHP的未來將通過適應新技術趨勢和引入創新特性來實現：1)適應云計算、容器化和微服務架構，支持Docker和Kubernetes；2)引入JIT編譯器和枚舉類型，提升性能和數據處理效率；3)持續優化性能和推廣最佳實踐。 引言在編程世界中，PHP一直是網頁開發的中流砥柱。作為一個從1994年就開始發展...程式設計 發佈於2025-07-13
學習中文
- 1 走路用中文怎麼說？ 走路中文發音，走路中文學習
- 2 坐飛機用中文怎麼說？ 坐飞机中文發音，坐飞机中文學習
- 3 坐火車用中文怎麼說？ 坐火车中文發音，坐火车中文學習
- 4 坐車用中文怎麼說？ 坐车中文發音，坐车中文學習
- 5 開車用中文怎麼說？ 开车中文發音，开车中文學習
- 6 游泳用中文怎麼說？ 游泳中文發音，游泳中文學習
- 7 騎自行車用中文怎麼說？ 骑自行车中文發音，骑自行车中文學習
- 8 你好用中文怎麼說？ 你好中文發音，你好中文學習
- 9 謝謝用中文怎麼說？ 谢谢中文發音，谢谢中文學習
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
