如何將div居中4

居中 div 長期以來一直是軟體開發人員中的一個梗，尤其是像我這樣的後端開發人員，他們經常與包括 CSS 在內的前端技術作鬥爭。

好消息是，由於新的align-content CSS 屬性，鬥爭終於結束了。當然，該屬性僅處理垂直對齊。稍後會詳細介紹。

歷史上是如何完成的

在引入align-content之前，我們通常必須使用CSS Grid或Flexbox來實現垂直對齊。

網格範例：

<div style="display: grid; align-content: center; justify-content: center; height: 100vh;">
    Hello World!
</div>

彈性盒範例：

<div style="display: flex; flex-direction: row; align-items: center; justify-content: center; height: 100vh;">
    Hello World!
</div>

justify-content 屬性用於 Grid 和 Flexbox 中 div 內容的水平對齊。對於常規 div，我們可以簡單地使用 text-align，如下所示：

<div style="text-align: center; height: 100vh;">
    Hello World!
</div>

2024 年如何完成

隨著align-content的引入，不再需要依賴Grid和Flexbox，它們都有一些缺點。我們可以透過以下方式更乾淨地實現相同的結果：

<div style="align-content: center; height: 100vh;">
    Hello World!
</div>

如前所述，這僅處理垂直對齊。對於水平對齊，我們仍然可以結合可靠的 text-align 屬性和align-content。

<div style="align-content: center; text-align: center; height: 100vh;">
    Hello World!
</div>

請注意，最低支援的瀏覽器版本為 Chrome 123、Firefox 125 和 Safari 17.4

資源

• MDN 網路文件：align-content
• 建造您自己的：CSS 垂直中心

特色圖片學分

• ChatGPT 產生的特色影像

以上是如何將div居中4的詳細內容。更多資訊請關注PHP中文網其他相關文章！