如何在Less中定义通用的CSS flex水平垂直居中？-css教程-PHP中文网

center-flex Mixin能规避90%居中失效问题，因其固化display: flex、justify-content: center、align-items: center三属性，强制要求父容器设明确高度（如min-height: 100dvh），并避免子元素脱离Flex上下文。

如何在less中定义通用的css flex水平垂直居中？

直接用 center-flex Mixin，别自己拼写三行 flex 属性——它能规避 90% 的居中失效问题。

为什么必须封装成 Mixin 而不是复制粘贴 CSS？

手写 display: flex; justify-content: center; align-items: center; 看似简单，但每次都要确认父容器有没有高度、子元素是否被 position: absolute 带走、flex-direction 是否意外改成 column。Mixin 把这些检查点固化下来，还能统一加 min-height: 100dvh 防 iOS 视口跳变。

常见错误现象：align-items: center 写了但没效果，Computed 样式里值是对的，位置却没动——八成是父容器 height 为 0。

必须要求调用时父容器已设明确高度（如 min-height: 100dvh），Mixin 不替你补这个
不处理子元素 margin 或 padding，需使用者自行重置（比如 & > * { margin: 0; }）
不兼容 IE10 以下，但现代项目基本无需考虑；若需 fallback，得额外加 display: -ms-flexbox 前缀

`center-flex` Mixin 的标准写法与参数设计

它只做一件事：让直接子元素在父容器内真正居中，不依赖宽高、不触发 BFC 异常、不和 float 冲突。参数为空，因为不需要传——高度由使用者控制，居中逻辑本身无变量。

标准定义：

.center-flex() {
  display: flex;
  justify-content: center;
  align-items: center;
}

使用方式：

.login-box {
  .center-flex();
  min-height: 100dvh;
}

不要给 Mixin 加高度参数（比如 .center-flex(100vh)），那会误导使用者以为“传了高度就自动生效”
避免在 Mixin 内硬写 height: 100%，百分比高度依赖父级有明确高度，容易断链
如果父容器是，记得同步设 html, body { height: 100%; margin: 0; }，否则 100% 无效

什么时候不能用 `center-flex`？

当子元素是 position: absolute、float: left 或 display: inline 时，它完全失效——这些元素已退出 Flex 上下文，justify-content 和 align-items 对它们无感知。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

常见错误场景：

模态框里用了 position: fixed 的遮罩层，结果内容没居中：遮罩层本身不是 flex item，得单独处理
子元素写了 flex-grow: 1，占满全部空间后，align-items: center 就没“剩余空间”可分配了
父容器用了 flex-direction: column，但忘了 justify-content 此时管的是垂直方向，align-items 反而管水平——属性作用轴向翻转了

此时必须手动切回绝对定位方案：position: relative + top: 50% + left: 50% + transform: translate(-50%, -50%)，但这就和 center-flex 无关了。