如何使用 CSS 的 Flexbox 屬性使 居中？

我們可以使用flexbox的justify-content屬性和align-item屬性在css中將

居中。它們很受歡迎，因為它們響應靈敏且易於使用. 在本文中，我們將學習如何使用 Flexbox 屬性使

居中。

#使用align-items和justify-content屬性

使用flexbox的最受歡迎的居中div的方法是結合justify-content和align-items屬性。

• justify-content屬性會水平居中對齊。

• #align-items 屬性將div垂直居中對齊。

如果您只想在一個方向（即垂直或水平）居中對齊，我們應該只使用我們提到的屬性之一。

使用align-items和justify-contents來水平和垂直居中對齊子項目。

＃＃＃例＃＃＃ 雷雷

在程式碼中，父元素是一個綠邊橙色框，高度為視口高度的30%，寬度為視口寬度的30%。父元素水平和垂直居中“display: flex”、“ flex-direction: row」、「justify-content: center」和「align-items: center」的幫助。
#要使用align-items和justify-content，我們首先需要使用display屬性宣告元素為flexbox。子元素是一個高度為視口高度的10%、寬度為視口寬度的10%的帶有紅色的黃色盒子，放置在父元素內部。
結論

在文章中，我們了解如何使用CSS的flexbox屬性來居中一個

。我們只需要使用flexbox的justify-content和align-content屬性就可以實現相同的效果。

以上是如何使用 CSS 的 Flexbox 屬性使

居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css if using Property this display viewport flex

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除