垂直センタリングするSCSS Mixin

mixin便利

@mixin vertical-align-ghost() {
  &:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    margin-right: -0.25em;
  }
}

@mixin vertical-align-block() {
  display: inline-block;
  vertical-align: middle;
}

.container {
  @include vertical-align-ghost;

  text-align: center;

  .block {
    @include vertical-align-block;
  }
}

最近のブラウザだと、もっと簡単な方法としてこういうのもある。

@mixin vertical-align {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.container {
  .block {
    @include vertical-align;
  }
}