Flex布局水平居中技巧详解

本篇文章向大家介绍《Flex布局水平居中实战：align-items与justify-content详解》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

使用 justify-content 和 align-items 可实现 Flexbox 水平垂直居中：justify-content 控制主轴（水平）对齐，设为 center 实现水平居中；align-items 控制交叉轴（垂直）对齐，设为 center 实现垂直居中；两者结合可使元素在容器内完全居中，需确保容器有明确高度，常用于登录页、卡片布局等场景。

在使用 Flexbox 布局时，水平居中和垂直居中是常见的布局需求。通过 justify-content 和 align-items 两个属性，可以轻松实现内容的居中对齐。下面结合实战说明如何正确使用它们。

1. justify-content 控制主轴方向的对齐（通常是水平方向）

justify-content 用于设置 flex 容器内子元素在主轴（main axis）上的对齐方式。默认主轴是水平方向（row），所以它常用来实现水平居中。

• flex-start：左对齐（默认）
• flex-end：右对齐
• center：居中对齐
• space-between：两端对齐，中间间距相等
• space-around：每个项目两侧间距相等

要实现水平居中，将容器的 justify-content 设置为 center：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
}

2. align-items 控制交叉轴方向的对齐（通常是垂直方向）

align-items 用于设置子元素在交叉轴（cross axis）上的对齐方式。当主轴是水平方向时，交叉轴就是垂直方向，因此它控制垂直居中。

• flex-start：顶部对齐
• flex-end：底部对齐
• center：居中对齐
• stretch：拉伸填满容器（默认）
• baseline：基线对齐

要实现垂直居中，设置 align-items: center：

.container {
  display: flex;
  align-items: center; /* 垂直居中 */
}

3. 同时实现水平和垂直居中

如果想让一个或多个子元素在容器中完全居中（既水平又垂直），只需同时使用两个属性：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 100vh; /* 确保容器有高度，否则看不出垂直效果 */
}

这样，所有子元素会在容器中居中显示，非常适合做登录页、弹窗或欢迎界面的布局。

4. 实战示例：居中的卡片布局

假设我们要创建一个页面，中间显示一张卡片，并水平垂直居中：

<div class="card-container">
  <div class="card">欢迎使用 Flex 居中</div>
</div>

CSS 样式如下：

.card-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f0f0f0;
}
<p>.card {
width: 300px;
height: 200px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
}</p>

这个例子中，外层容器使用 Flex 居中卡片，卡片内部也居中文本，整体视觉非常平衡。

基本上就这些。掌握 justify-content 和 align-items 的作用方向，就能灵活应对大多数居中布局场景。不复杂但容易忽略的是容器必须有明确尺寸（尤其是高度），否则 align-items: center 可能无效。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Flex布局水平居中技巧详解》文章吧，也可关注golang学习网公众号了解相关技术文章。