Flex布局实现水平居中方法详解

，结果完全不居中。这时候就得换 flex。

• 适合用 text-align 的：纯文字、图标字体、单张图片等行内级内容
• 适合用 flex 的：任意结构的子元素，尤其是需要同时控制水平+垂直居中的时候

justify-content: center 不生效？检查这几点

Flex 居中失效，90% 是因为下面几个低级但难察觉的问题：

• 容器没设 display: flex —— 仅写 justify-content 没用，它不是独立属性
• 子元素写了 float: left/right —— Flex item 会忽略 float，但旧代码残留容易让人误判
• 子元素设置了 margin: auto 且容器是 block 布局 —— 这时 margin: auto 会抢占行为，和 flex 冲突
• 父容器宽度为 0 或被压缩（比如父级 white-space: nowrap + 子元素过宽）—— flex 容器得有可分配空间才能居中

想同时水平+垂直居中？加一行 align-items

Flex 天然支持二维居中，只要主轴和交叉轴都设置好对齐方式：

div.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

注意：align-items: center 默认按容器高度居中，所以容器最好有明确高度（height、min-height 或由内容撑开）。如果容器高度为 auto 且子元素又没撑高，它就只能按“内容高度”居中，视觉上可能偏上。

• 不想依赖容器高度？可用 min-height: 100vh 强制视口高度
• 子元素是多行文本或弹性内容？align-items: center 仍有效，但要注意 line-height 干扰
• IE10/11 对 align-items 支持有 bug，若需兼容，建议加 -ms-flex-align: center

flex 居中看着简单，实际最容易栽在容器尺寸、子元素 display 类型和旧样式残留上。动手前先用浏览器 devtools 看一眼 computed 样式里 display 是否真成了 flex，比猜强得多。

以上就是《Flex布局实现水平居中方法详解》的详细内容，更多关于的资料请关注golang学习网公众号！