Flex布局实现水平垂直居中方法

想用最简洁、现代且兼容性良好的方式实现元素的水平垂直居中？Flexbox 的 `align-items: center` 和 `justify-content: center` 组合堪称“一行代码级”的解决方案——只需三行 CSS（含 `display: flex`），无论子元素尺寸固定与否、单个还是多个，都能精准居中；只需注意为父容器设置足够高度（如 `height: 100vh` 或 `min-height`），就能立刻看到稳稳居中的效果，简单却极易被忽略关键细节，掌握它，告别复杂 hack，轻松搞定页面布局核心需求。

使用 Flexbox 实现水平垂直居中是一种现代、简洁且兼容性良好的方法。只需要在父容器上设置两个 CSS 属性即可完成。

使用 flex、align-items 和 justify-content

将父容器设置为 Flex 容器，然后通过 align-items 控制交叉轴（垂直）居中，justify-content 控制主轴（水平）居中。

示例代码：

.container {
  display: flex;
  align-items: center;      /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
  height: 100vh;            /* 示例：让容器占满视口高度 */
}

这种方法适用于所有类型的子元素，无论其尺寸是否固定，都能完美居中。而且支持多个子元素的集体居中布局。

补充说明

• align-items: center 使子元素在交叉轴（默认为 Y 轴）上居中对齐。
• justify-content: center 使子元素在主轴（默认为 X 轴）上居中对齐。
• 如果容器没有明确高度，可能需要设置高度（如 height: 300px 或 min-height）才能看到垂直居中效果。

基本上就这些，不复杂但容易忽略细节。只要父元素是 flex 布局，这两个属性一加，内容就稳稳居中了。

本篇关于《Flex布局实现水平垂直居中方法》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！