<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
This Pen doesn't use any external CSS resources.