Code前端首页关于Code前端联系我们

Flexbox 居中

terry 2年前 (2023-09-07) 阅读数 205 #CSS

文章标签 CSS3 flexbox

Flexbox 已成为我最喜欢的居中页面元素的方式。

将项目包装在 div 中并设置 display: flex 和 justify-content: center。

HTML 文件

<div class="wrapper">
  ...
</div>

CSS文件

.wrapper {
  display: flex;
  justify-content: center;
}

使用 Tailwind 或 BootStrap 就更容易了，您所要做的就是添加 flex 和 justify-center 类：

本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。