scss 通过@content垂直对齐显示表/ table-cell mixin

Posted 2021-05-18

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了scss 通过@content垂直对齐显示表/ table-cell mixin相关的知识，希望对你有一定的参考价值。

<div class="box">
  <h1>Fuck yeah</h1>
</div>


/*
@content usage example
DISPLAY TABLE BOX
other examples: https://robots.thoughtbot.com/sasss-content-directive
*/

@mixin display-table($vertical_align: middle, $width: 100%, $height: 100vh) {
  display: table;
  width: $width;
  height: $height;
  > * {
    display: table-cell;
    text-align: center;
    vertical-align: $vertical-align;
    @content;
  }
}

.box {
  @include display-table(middle) {
    background-color: yellow;
  }
}

.box {
  @include display-table(middle, 100%, 400px) {
    background-color: yellow;
  }
}

以上是关于scss 通过@content垂直对齐显示表/ table-cell mixin的主要内容，如果未能解决你的问题，请参考以下文章

text 只需一行SCSS就可以垂直和水平对齐或只是垂直对齐，它同时支持两者。