middle vertical align. Just using the link and apply suitable case: https://css-tricks.com/centering-css-complete-guide/

centering-css-complete-guide.md

Take note when using https://css-tricks.com/centering-css-complete-guide/

• Vertically
  • Is it inline or inline-* elements (like text or links)?
    • Is it a single line?
      • don't know height of element: padding-top == padding-bottom
      • know height of element: using line-height

          .center-text-trick {
            height: 100px; /* apply inline-block element, inline element doesn't need it */
            line-height: 100px; 
            white-space: nowrap; /* don't break line */
          }

Ref:

• https://css-tricks.com/almanac/properties/v/vertical-align/ vertical-align suite for img & table-cell
• https://css-tricks.com/what-is-vertical-align/ vertical-align suite for img & table-cell
• http://christopheraue.net/2014/03/05/vertical-align/ very details, read it if you want to know base-line, line-height
• https://css-tricks.com/centering-in-the-unknown/ ghost element technique

line-height-middle-alignment.md

using line-height make text (inline or inline-block) is middle alignment

<div class="container">
  <span class="text">middle text</span>
</div>

Suppose, you know height of .container (eg: 300px). css is

.text {
line-height: 300px;
}

Note, the solution is right when text is not broken to multi-lines.

middle-vertical-align.css

/* http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ */
.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}