如何在Sass中编写用于CSS水平垂直居中的通用Mixin？-css教程-PHP中文网

不能直接用 display: flex 写通用 mixin，因为需兼容 ie11 等旧浏览器，其 flex 行为不一致且对 absolute 子元素无效；应按「已知宽高」「未知宽高」「绝对定位」三类场景拆分为 center-known、center-unknown、center-flex 三个独立 mixin，并避免硬编码、注重命名与参数灵活性。

如何在sass中编写用于css水平垂直居中的通用mixin？

为什么不能直接用 `display: flex` 写通用 mixin？

因为真实项目里常要兼容 IE11 或老版移动端，flex 的 align-items/justify-content 在 IE 中行为不一致，且无法对 position: absolute 子元素生效。通用 mixin 必须覆盖多种定位场景，不能只押一种方案。

`center-align` mixin 要区分三种定位上下文

水平垂直居中本质是「已知宽高」「未知宽高」「绝对定位子元素」三类问题，混在一起写只会出 bug。推荐拆成三个独立 mixin：

@mixin center-known($width, $height)：适用于固定尺寸元素，用 margin: auto + position: absolute 四边设 0
@mixin center-unknown：适用于图片、图标等无显式宽高的内容，依赖 transform: translate(-50%, -50%) + top: 50%; left: 50%
@mixin center-flex：仅用于现代浏览器容器，内部用 display: flex + align-items/justify-content

别试图用一个参数列表兜住所有情况——$method: flex 这种开关式设计在实际维护中极易漏掉 fallback，反而增加调试成本。

IE11 下 `transform` 的坑必须手动处理

IE11 对 transform: translate(-50%, -50%) 的解析有偏差，尤其当父容器有 border 或 padding 时，偏移量会错位。解决方案不是加 hack，而是加一层条件判断：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

@mixin center-unknown {
  position: absolute;
  top: 50%;
  left: 50%;
  @if $legacy-support == true {
    // IE11 需要额外修正
    margin-left: -16px; // 假设内容平均宽 32px
    margin-top: -16px;
  } @else {
    transform: translate(-50%, -50%);
  }
}

更稳妥的做法是把 $legacy-support 设为全局变量，在构建时根据目标浏览器决定是否启用修正值，而不是靠运行时检测。