在前端开发中，我们经常需要实现盒子的纵向居中和横向居中，这是一个比较基础的技能。在SASS中，我们可以使用flex布局和position属性来实现这两种居中方式。
纵向居中
要实现纵向居中，我们需要设置盒子的高度和line-height相等，并将其display属性设置为flex。具体代码如下：
.container { display: flex; align-items: center; // 纵向居中 height: 300px; line-height: 300px; // 纵向居中 }
在上面的代码中，我们将容器的display属性设置为flex，并使用align-items属性将盒子内的内容纵向居中。此外，我们还需要将容器的高度和line-height属性设置为相同的值，这将使容器的内容垂直居中显示。
横向居中
要实现横向居中，我们可以使用position属性，将盒子的左右边距设置为auto，从而将它居中。具体代码如下：
-- -------------------- ---- ------- ---------- - --------- --------- -- -- -------- ---- ------ - ---- - --------- --------- -- ---------- ---- ---- -- ------------ ----- ---- -- -------- ---------- --------------- ------ -- ------- -展开代码
在上述代码中，我们将容器的position属性设置为relative，这将使盒子内的内容相对于容器定位。然后，我们将包含文本的盒子的position属性设置为absolute，并将其top和left属性设置为50%。最后，我们使用transform属性使这个盒子垂直和水平居中。这样我们就可以在父容器的水平方向上实现居中了。
最后
在实现纵向和横向居中的过程中，我们可以使用SASS来简化CSS的编写。不管是哪种方式，熟悉它们都将会对你成为一个出色的前端开发人员有非常大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b6ff53306f20b3a638c56f
