如何利用SCSS实现CSS居中定位(水平+垂直)的多种快捷写法？-css教程-PHP中文网

vertical-center mixin 仅适用于父容器有明确高度且子元素需居中的场景；默认设 min-height: 100vh 是为全屏提供高度基准，内容撑开容器时应传 false 关闭，ssr 项目推荐用 100dvh 替代以避免 ios safari 地址栏切换跳动。

如何利用scss实现css居中定位(水平+垂直)的多种快捷写法？

vertical-center Mixin 不是“一键居中神器”，它只在父容器有明确高度、子元素需居中时才可靠生效。直接套用却忽略容器是否由内容撑开，或是否运行在 SSR 环境，大概率导致页面拉长、跳动或居中失效。

为什么 `vertical-center` 默认加 `min-height: 100vh`？

因为多数全屏场景（如登录页、引导页）需要一个稳定高度基准，100vh 能快速提供这个基准。但它不是布局高度本身——只是兜底。

若父容器本就靠内容撑高（比如一段文字+按钮的 div），加 min-height: 100vh 会强制拉伸，产生多余滚动条
此时应传 false 关闭：@include vertical-center(false, true)，Mixin 就只输出 display: flex; justify-content: center; align-items: center
SSR 项目更推荐用 100dvh 替代 100vh（Chrome 102+ / Safari 16.4+ 支持），避免 iOS Safari 地址栏切换时重排跳动
兼容旧版 Safari（≤15.6）仍需回退到 100vh，但必须配合 JS 监听 resize 动态修正 min-height

`$reset-margin` 参数到底清什么？

它只对父容器的**直接子元素**（即 > *）设 margin: 0，目的很具体：防止 <p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>、<h2></h2> 这类默认带外边距的标签，干扰 flex 的垂直居中计算。

不智能，也不递归——子元素内部嵌套的组件（如带 margin-bottom: 16px 的卡片）会被一并清除
安全做法是关掉自动重置：@include vertical-center(true, false)，改用语义类手动控制，例如 .card { margin: 0; }
对已设 float 或 position: absolute 的子元素，这个重置无效且无意义——它们早已脱离文档流，margin 本就不参与 flex 排列

如何用同一 Mixin 实现「垂直居中 + 水平左对齐」？

原 Mixin 默认同时启用 justify-content: center 和 align-items: center，但业务中常需保留左侧对齐（比如弹窗标题、侧边导航图标）。不能靠覆盖样式硬删，而应利用参数控制。

SCSS 中可通过扩展参数支持水平方向独立控制，例如：@include vertical-center(true, true, $justify: flex-start)
若当前 Mixin 不支持该参数，最稳妥的方式是单独写一行：justify-content: flex-start，覆盖默认值
注意顺序：这行必须放在 @include 之后，否则会被 Mixin 内部声明覆盖
若子元素是 <img>，记得额外加 max-width: 100% 和 height: auto，否则可能溢出容器

真正容易被忽略的，不是怎么写 Mixin，而是每次调用前是否确认了父容器的高度来源、是否处于 SSR 渲染链路、以及子元素是否自带不可控的 margin 或 display 行为。这些细节不查清，再“快捷”的写法也会在上线后突然失效。