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

我们可以使用flexbox的justify-content属性和align-item属性在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属性来居中一个

。我们只需要使用flexbox的justify-content和align-content属性就可以实现相同的效果。

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

居中？的详细内容。更多信息请关注PHP中文网其他相关文章！

css if using Property this display viewport flex

声明：

本文转载于：tutorialspoint.com。如有侵权，请联系admin@php.cn删除