![如何使用 CSS 的 Flexbox 属性使 <div>居中?](https://img.php.cn/upload/article/000/000/164/169371366490554.jpg)
我們可以使用flexbox的justify-content屬性和align-item屬性在css中將
居中。它們很受歡迎,因為它們響應靈敏且易於使用. 在本文中,我們將學習如何使用 Flexbox 屬性使
居中。
#使用align-items和justify-content屬性
使用flexbox的最受歡迎的居中div的方法是結合justify-content和align-items屬性。
如果您只想在一個方向(即垂直或水平)居中對齊,我們應該只使用我們提到的屬性之一。
使用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中文網其他相關文章!