当我们设计网页时，经常会遇到需要将元素水平居中的问题。虽然可以使用传统的 margin:auto 方法来实现，但是使用 Sass 可以让我们更优雅地实现页面水平居中，并且更加高效。
为什么使用 Sass？
Sass 是一种 CSS 预处理器，它允许我们使用变量、嵌套、继承等高级功能来简化 CSS 开发，并且可以将其编译为普通的 CSS 文件。使用 Sass 可以让我们更加高效、优雅地编写 CSS，同时也能节省大量时间和精力。
如何使用 Sass 实现水平居中？
使用 Sass 实现水平居中，我们需要考虑以下几个方面：
- 计算元素宽度；
- 设置元素左右 margin 值；
- 使用 Sass 变量和 mixin 等高级功能，简化 CSS 代码。
计算元素宽度
要实现页面水平居中，我们需要先计算元素的宽度，然后再设置其左右 margin 值。在 Sass 中，我们可以使用变量来保存元素宽度，这样可以方便我们在多处使用。
$content-width: 800px; // 元素宽度为 800px
设置元素左右 margin 值
使用 Sass，我们可以使用 mixin 来生成 .center 类，该类会自动计算并设置元素的左右 margin 值，从而实现页面水平居中。
@mixin center {
margin-left: auto;
margin-right: auto;
}该 mixin 会将 margin-left 和 margin-right 的值都设置为 auto，这样可以让元素在父元素的宽度范围内居中显示。
在 HTML 中使用 .center 类
使用上述 mixin，我们可以生成一个 .center 类，然后在 HTML 中使用该类，从而实现页面水平居中。
<div class="container">
<div class="center">我是要水平居中的元素</div>
</div>-- -------------------- ---- -------
---------- -
------ -----
----------- -------
------- -
-------- -------
------ ---------------
-
-如上所示，我们在 HTML 中使用 .center 类，然后在 Sass 中定义 .container 和 .center 两个类。在 .container 类中，我们设置为 text-align: center，从而使 .center 元素在 .container 中居中显示；同时，我们使用 mixin 来生成 .center 类，并且设置其宽度为 $content-width。
这样，我们就可以优雅地使用 Sass 完成页面水平居中了。
总结
使用 Sass 可以让我们更加优雅、高效地实现页面水平居中。通过使用变量和 mixin 等高级功能，我们可以轻松计算元素宽度、设置元素 margin 值，并且生成 .center 类，从而实现元素水平居中。如果你还没有使用 Sass，那么现在是时候开始使用了！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646d6376968c7c53b0c136bb