#vertical-wrap
      article id="vertical-box" class="box-blue"
        p Here is another way to align text vertically.
    ul class="toggleClass"
      li Child1
      li Child2
      li Child3
      li Child4
View Compiled
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
$bgBody : #ddd;
$bgDefault : #fff;
$type1Bg : #c33c3c;
$type1Color : #fff;
$type2Bg : #3c46c3;
$type2Color : #fff;
$type3Bg : #000;
$type3Color : #fff;

body,html{
    height: 100%;
    margin: 0;
    padding: 0;
    background: $bgBody;
    font-family: 'Lato', sans-serif;
}
#vertical-wrap{
    height: 100%;
    text-align: center;
    white-space: nowrap;
    &:before {
      content: "";
      display: inline-block;
      vertical-align: middle;
      width: 0;
      margin-right: -.25em; /*might want to tweak this. .25em for extra white space */
      height: 100%;
    }
    #vertical-box{
      display: inline-block;
      vertical-align: middle;
      white-space: normal;
      padding: 0 1em;
      text-align: center;
      background: $bgDefault;
      &.box-red {
        background: $type1Bg;
        color: $type1Color;
      }
      &.box-blue {
        background: $type2Bg;
        color: $type2Color;
      }
    }
 }

ul.toggleClass {
  color: $type1Color;
  position: absolute;
  display: block;
  width: 100%;
  list-style: none;
  bottom: 0;
  padding: 0;
  margin: 0;
  white-space: nowrap;
  li {
    text-indent: 1em;
    display: inline-block;
    width: 25%;
    width: calc(100%/4);
    padding: 20px 0;
    margin: 0;
    white-space: normal;
    &:nth-child(odd) {
      background: $type1Bg;
      color: $type1Color;
    }
    &:nth-child(even) {
      background: $type2Bg;
      color: $type2Color;
    }
    &.active {
      background: $type3Bg;
      color: $type3Color;
    }
  }
}

View Compiled
$(function() {
  var verWrap = $('#vertical-box');
  verWrap.on('mouseup', function(){verWrap.css('border', '4px solid black');});
  verWrap.mousedown(function(){verWrap.css('border', '4px solid yellow');});

	verWrap.hover(
    function(){verWrap.removeClass('box-blue').addClass('box-red');},
    function(){verWrap.removeClass('red-blue').addClass('box-blue');}
	);
$( "li" ).hover(function() {
  $( this ).toggleClass( "active" );
});
$('li')
  .mouseup(function(){
    $(this).text('Mouse up');
  }).mousedown(function() {
    $(this).text('Mouse down');
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js