如何使用 CSS 的 Flexbox 属性使

居中？

。

使用align-items和justify-content属性

使用flexbox最流行的居中div的方法是结合justify-content和align-items属性。

• justify-content属性会居中校准div。

• align-items 属性将div 垂直居中对齐。

如果您只想在一个方向（即垂直或水平）居中对齐，我们应该只使用我们提到的属性之一。

使用align-items和justify-contents使子元素水平和垂直居中对齐。

示例

雷雷

• 在代码中，父元素是一个绿边橙色框，高度为视口高度的30%，宽度为视口宽度的30%。父元素在水平和垂直方向上均借助“显示：flex”，“flex-direction：row”，“justify-content：center”和“align-items：center。”

• 要使用align-items和justify-content，我们首先使用display属性声明元素为flexbox。子元素是一个高度为视口高度的10%、宽度为视口宽度的10%的带有红色标签的需要边框的黄色盒子，放置在父元素内部。

结论

在本文中，我们了解了如何使用CSS的flexbox属性来居中一个