v-center: table display method

This method requires a container and an inner element. The mixin applies to the container; identify the to-be-centered inner element(s) with the $inner argument.

Any to-be-centered element should be an immediate child of the container (container > inner).

example

HTML

<div class="eg-vcenter-td eg-vcenter-td-1">  <span class="scut-inner">
    Using the default classname "scut-inner".
  </span>
</div>
<div class="eg-vcenter-td eg-vcenter-td-2">
  <div class="eg-vcenter-td-inner">
    Using a special classname.
  </div>
</div>
<p>And illustrating the use of a list of distinct selectors ...</p>
<div class="eg-vcenter-td eg-vcenter-td-3">
  <div class="special-selector-1">first</div>
  <div class="special-selector-2">second</div>
  <div class="special-selector-3">third</div>
</div>

.eg-vcenter-td-1 {
  @include scut-vcenter-td;
  // or @extend %scut-vcenter-td;
  height: 8em;
}
.eg-vcenter-td-2 {
  @include scut-vcenter-td(".eg-vcenter-td-inner");
  height: 12em;
}
// illustrating a list of selectors
.eg-vcenter-td-3 {
  @include scut-vcenter-td(".special-selector-1", ".special-selector-2", ".special-selector-3");
  height: 9em;
}

.eg-vcenter-td-1 {
  display: table;
  height: 8em;
}
.eg-vcenter-td-1 > .scut-inner {
  display: table-cell;
  vertical-align: middle;
}

.eg-vcenter-td-2 {
  display: table;
  height: 12em;
}
.eg-vcenter-td-2 > .eg-vcenter-td-inner {
  display: table-cell;
  vertical-align: middle;
}

.eg-vcenter-td-3 {
  display: table;
  height: 9em;
}
.eg-vcenter-td-3 > .special-selector-1 {
  display: table-cell;
  vertical-align: middle;
}
.eg-vcenter-td-3 > .special-selector-2 {
  display: table-cell;
  vertical-align: middle;
}
.eg-vcenter-td-3 > .special-selector-3 {
  display: table-cell;
  vertical-align: middle;
}

Result