CSSflex居中布局全攻略

一分耕耘，一分收获！既然打开了这篇文章《CSS flex布局完全居中方法》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

使用Flexbox布局时，设置display: flex、justify-content: center和align-items: center可使子元素在父容器中水平垂直居中，需确保父容器有明确高度，适用于登录框、弹窗等场景。

要实现元素在父容器中完全居中（即水平和垂直居中），可以通过 justify-content 和 align-items 两个 CSS 属性配合使用，前提是父容器使用了 Flexbox 布局。

1. 使用 Flexbox 的 justify-content 与 align-items

将父容器设置为 Flex 容器，并同时使用 justify-content: center（水平居中）和 align-items: center（垂直居中）即可实现子元素的完全居中。

示例代码：

.container {
  display: flex;
  justify-content: center;  /* 水平居中 */
  align-items: center;      /* 垂直居中 */
  height: 100vh;            /* 确保容器有高度 */
}
.child {
  width: 200px;
  height: 100px;
  background-color: #007acc;
}

在这个例子中，.child 元素会在 .container 中完全居中显示。

2. 关键点说明

• display: flex 是前提，没有它 justify-content 和 align-items 不生效。
• justify-content 控制主轴（默认是横轴）上的对齐方式。
• align-items 控制交叉轴（默认是竖轴）上的对齐方式。
• 父容器需要有明确的高度（如 height: 100vh、具体像素值或由内容撑开），否则垂直居中可能不明显。

3. 应用场景

这种方法适合居中单个或多个子元素，无论它们大小如何，都能在容器内保持居中。常用于登录框、弹窗、卡片布局等需要视觉居中的界面设计。

基本上就这些，只要记得开启 Flex 布局，再配上两个 center，就能轻松实现完全居中。

终于介绍完啦！小伙伴们，这篇关于《CSSflex居中布局全攻略》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！