<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