在 HTML 和 CSS 中使 Div 居中的不同方法
發佈於2024-08-02
瀏覽：606
在 LinkedIn 上關注我
在 Github.com 上關注我
點選閱讀
沒有Boaring Setion，我們可以重定向到編碼！
1. 使用 Flexbox
Flexbox 是一款功能強大的佈局工具，可輕鬆地將元素水平和垂直居中。
例子：
Center Div with Flexbox
Centered with Flexbox
2. 使用網格
CSS Grid 是另一個強大的佈局系統，可輕鬆地將元素置中。
例子：
Center Div with Grid
Centered with Grid
3. 使用絕對定位和變換
此方法涉及絕對定位 div 並使用變換將其居中。
例子：
Center Div with Absolute Positioning
Centered with Absolute Positioning
4. 使用自動保證金
對指定寬度的元素設定margin: auto可以使其水平居中。
例子：
Center Div with Margin Auto
Centered with Margin Auto
5. 使用表格顯示
此方法使用 display: table 和 display: table-cell 讓元素置中。
例子：
Center Div with Table Display
Centered with Table Display
拜耶
快樂編碼！
版本聲明
本文轉載於：https://dev.to/muhammedshamal/different-ways-to-center-a-div-in-html-and-css-47df?1如有侵犯，請聯絡[email protected]刪除
最新教學
更多>
-
儘管程式碼有效，為什麼 POST 請求無法擷取 PHP 中的輸入？解決PHP 中的POST 請求故障在提供的程式碼片段中：action=''而非：action="<?php echo $_SERVER['PHP_SELF'];?>";?>"檢查$_POST陣列：表單提交後使用 var_dump 檢查 $_POST 陣列的內...程式設計 發佈於2024-12-29 -
插入資料時如何修復「常規錯誤：2006 MySQL 伺服器已消失」？插入記錄時如何解決「一般錯誤：2006 MySQL 伺服器已消失」介紹：將資料插入MySQL 資料庫有時會導致錯誤「一般錯誤：2006 MySQL 伺服器已消失」。當與伺服器的連線遺失時會出現此錯誤，通常是由於 MySQL 配置中的兩個變數之一所致。 解決方案：解決此錯誤的關鍵是調整wait_tim...程式設計 發佈於2024-12-29
-
Bootstrap 4 Beta 中的列偏移發生了什麼事？Bootstrap 4 Beta：列偏移的刪除和恢復Bootstrap 4 在其Beta 1 版本中引入了重大更改柱子偏移了。然而，隨著 Beta 2 的後續發布，這些變化已經逆轉。 從 offset-md-* 到 ml-auto在 Bootstrap 4 Beta 1 中， offset-md-*...程式設計 發佈於2024-12-29
-
如何在 PHP 中組合兩個關聯數組，同時保留唯一 ID 並處理重複名稱？在 PHP 中組合關聯數組在 PHP 中，將兩個關聯數組組合成一個數組是常見任務。考慮以下請求：問題描述：提供的代碼定義了兩個關聯數組，$array1 和 $array2。目標是建立一個新陣列 $array3，它合併兩個陣列中的所有鍵值對。 此外，提供的陣列具有唯一的 ID，而名稱可能重疊。要求是建...程式設計 發佈於2024-12-29
-
在 Go 中使用 WebSocket 進行即時通信构建需要实时更新的应用程序（例如聊天应用程序、实时通知或协作工具）需要一种比传统 HTTP 更快、更具交互性的通信方法。这就是 WebSockets 发挥作用的地方！今天，我们将探讨如何在 Go 中使用 WebSocket，以便您可以向应用程序添加实时功能。 在这篇文章中，我们将介绍： WebSoc...程式設計 發佈於2024-12-29
-
如何在 React 中有條件地應用類別屬性？在React 中有條件地應用類別屬性在React 中，根據從父組件傳遞的props 來顯示或隱藏元素是很常見的。為此，您可以有條件地應用 CSS 類別。然而，當使用語法 {this.props.condition ? 'show' : 'hidden'} 直接在字串中...程式設計 發佈於2024-12-28
-
如何在Java中執行系統命令並與其他應用程式互動？Java 中運行進程在 Java 中，啟動進程的能力是執行系統命令和與其他應用程式互動的關鍵功能。為了啟動一個流程，Java提供了一個相當於.Net System.Diagnostics.Process.Start方法。 解決方案：取得本地路徑對於執行至關重要Java 中的程序。幸運的是，Java ...程式設計 發佈於2024-12-28
-
如何在 C++ 中建立多行字串文字？C 中的多行字串文字 在 C 中，定義多行字串文字並不像 Perl 等其他語言那麼簡單。但是，您可以使用一些技術來實現此目的：連接字串文字一種方法是利用 C 中相鄰字串文字由編譯器連接的事實。將字串分成多行，您可以建立單一多行字串：const char *text = "This te...程式設計 發佈於2024-12-28
-
如何準確地透視具有不同記錄的資料以避免遺失資訊？有效地透視不同記錄透視查詢在將資料轉換為表格格式、實現輕鬆資料分析方面發揮著至關重要的作用。但是，在處理不同記錄時，資料透視查詢的預設行為可能會出現問題。 問題：忽略不同值考慮下表：------------------------------------------------------ | Id...程式設計 發佈於2024-12-27
-
為什麼 C 和 C++ 忽略函式簽章中的陣列長度？將陣列傳遞給C 和C 中的函數問題：為什麼C和C 編譯器允許在函數簽章中宣告數組長度，例如int dis(char a[1])（當它們不允許時）強制執行？ 答案：C 和C 中用於將數組傳遞給函數的語法是歷史上的奇怪現象，它允許將指針傳遞給第一個元素詳細說明：在C 和C 中，數組不是透過函數的引用傳遞...程式設計 發佈於2024-12-26
-
如何刪除 MySQL 中的重音符號以改進自動完成搜尋？在MySQL 中刪除重音符號以實現高效的自動完成搜尋管理大型地名資料庫時，確保準確和高效至關重要資料檢索。使用自動完成功能時，地名中的重音可能會帶來挑戰。為了解決這個問題，一個自然的問題出現了：如何在 MySQL 中刪除重音符號以改善自動完成功能？ 解決方案在於為資料庫列使用適當的排序規則設定。透過...程式設計 發佈於2024-12-26
-
如何在MySQL中實作複合外鍵？在 SQL 中實作複合外鍵一個常見的資料庫設計涉及使用複合鍵在表之間建立關係。複合鍵是多個列的組合，唯一標識表中的記錄。在這個場景中，你有兩個表，tutorial和group，你需要將tutorial中的複合唯一鍵連結到group中的欄位。 根據MySQL文檔，MySQL支援外鍵對應到複合鍵。但是，...程式設計 發佈於2024-12-26
-
為什麼我的 JComponent 隱藏在 Java 的背景圖片後面？調試背景圖像隱藏的JComponent在Java 應用程式中使用JComponent（例如JLabels）時，必須確保正確的行為和可見度。如果遇到組件隱藏在背景圖像後面的問題，請考慮以下方法：1。正確設定組件透明度：確保背景面板是透明的，以允許底層組件透過。使用setOpaque(false)方法來...程式設計 發佈於2024-12-26
學習中文
- 1 走路用中文怎麼說？ 走路中文發音，走路中文學習
- 2 坐飛機用中文怎麼說？ 坐飞机中文發音，坐飞机中文學習
- 3 坐火車用中文怎麼說？ 坐火车中文發音，坐火车中文學習
- 4 坐車用中文怎麼說？ 坐车中文發音，坐车中文學習
- 5 開車用中文怎麼說？ 开车中文發音，开车中文學習
- 6 游泳用中文怎麼說？ 游泳中文發音，游泳中文學習
- 7 騎自行車用中文怎麼說？ 骑自行车中文發音，骑自行车中文學習
- 8 你好用中文怎麼說？ 你好中文發音，你好中文學習
- 9 謝謝用中文怎麼說？ 谢谢中文發音，谢谢中文學習
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
