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

PHPz
发布: 2023-09-03 12:01:02
转载
1355 人浏览过

如何使用 CSS 的 Flexbox 属性使 <div>居中?

我们可以使用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中文网其他相关文章!

来源:tutorialspoint.com
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!