Vertical align with display table / table-cell mixin via @content
<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;
}
}