<div class="vertical-divider">
  <div class="center-element">YAY</div>
</div>
// Theese classes are only for full-height body for showcase
html { height: 100%; }
body { min-height: 100%; width: 100%; display: table; padding: 0; }


.vertical-divider {
  position: absolute;
  display: table;
  text-align: center;
  
  height: 100%; // CHANGE ME!
  width: 100%;
  
  .center-element {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    
    &:before, &:after {
      position: absolute;
      content: "";
      width: 1px;
      left: 50%;
      border-left: 1px solid black;
    }
    &:before {
      bottom: 50%;
      top: 0;
      margin-bottom: 20px;
    }
    &:after {
      top: 50%;
      bottom: 0;
      margin-top: 20px;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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