如何用css flex布局实现水平居中_技术学堂

如何用css flex布局实现水平居中

发布时间：2025-10-05 13:59

发布者：网络

浏览次数：

使用 justify-content: center 实现水平居中，需先设置父容器 display: flex；子元素无论宽度如何均可居中，若需垂直居中可添加 align-items: center。

如何用css flex布局实现水平居中

使用 CSS Flex 布局实现水平居中非常简单，只需要在父容器上设置几个关键的 Flex 属性即可。下面介绍具体方法。

当父容器启用 Flex 布局后，可以通过 justify-content: center 来让子元素在主轴（默认为横轴）上居中对齐。

示例代码：

HTML:

居中内容

CSS:
.container {
display: flex;
justify-content: center;
}

这样，.item 元素就会在其父容器中水平居中。

必须先将容器的 display 设置为 flex，才能使用 Flex 相关属性。否则 justify-content 不会生效。

UXbot

AI产品设计工具

185 查看详情 UXbot

不需要给子元素设置特定宽度也能居中。无论子元素是固定宽度、自适应还是由内容撑开，justify-content: center 都能让它水平居中。

小提示：

如果希望子元素也垂直居中，可以加上 align-items: center，实现完全居中。

基本上就这些，只要记住在父级开启 flex 并使用 justify-content: center，就能轻松实现水平居中。不复杂但容易忽略 display:flex 这一步。

以上就是如何用css flex布局实现水平居中的详细内容，更多请关注其它相关文章！