CSS vertical aligns using ::after pseudo element on the parent

CSS vertical aligns

// Resource https://medium.com/@hayavuk/vertically-center-variable-height-elements-inside-a-container-using-css-2a2aa9dbe032
// NOTE: this doesn't work with min-height set on the parent


@mixin vc-parent() { 
  white-space: nowrap; 
  &:after { 
    content: ''; 
    display: inline-block; 
    height: 100%;
    vertical-align: middle;
    width: 0; 
  } 
}
@mixin vc-child() { 
  display: inline-block; 
  vertical-align: middle;
  white-space: normal; 
}