v-center: line-height method

This method is simple, requires none of the extra <div>'s that make us all second-guess ourselves, and works in many common vertical-centering-situations.

However, it is also limited. Below I'll list some caveats — and if any of them mean this mixin doesn't fit your situation, try one of the other vertical-centering methods in Scut (via inline-block, via table display, and via transform).

• This method only works for inline content (usually text) that will not exceed a single line. So it's good for buttons and headings with backgrounds and things like that.
• The line-height set by this method will cascade into inner elements, so you have to make sure to override it as needed.
• If your element has a border and box-sizing: border-box this method will be a little off, because the line-height will start beneath the top border but the height will include the top border. To avoid this issue, you can either set box-sizing: content-box or use a different vertical-centering method.

example

.eg-vcenter-lh-1 {
  @include scut-vcenter-lh(50px);
}
.eg-vcenter-lh-2 {
  @include scut-vcenter-lh(50px);
  font-size: 0.7em;
}

.eg-vcenter-lh-1 {
  height: 50px;
  line-height: 50px;
}

.eg-vcenter-lh-2 {
  height: 50px;
  line-height: 50px;
  font-size: 0.7em;
}

Result