transform :translateY(-50%) not working properly

    @import url('https://fonts.googleapis.com/css?family=Open+Sans:400');
    @import url('https://fonts.googleapis.com/css?family=Raleway:300');
    * {
    	margin: 0;
    	padding: 0;
    	box-sizing: border-box;
    }
    html, body {
    	height: 100%;
    	background: #FFF;
    	text-align: center;
    	font: 1.15em/1 'Open Sans', sans-serif;
    	color: #FFF;
    }
    .wrapper {
    	background-color: #F5F5F5;
    	height: 100%;
    }
    #header {
    	background-color: #AFDED4;
    }
    .logo {
    	padding: 2%;
    }
    img {
    	max-width: 100%;
    }
    h2.dark {
    	color: #34495E;
    }
    h2 {
    	font: 300 2em/1 'Raleway', sans-serif;
    	color: #FFF;
    	padding: 2%;
    	position: relative;
    	top: 50%;
    	transform: translateY(-50%);
    }

<div class="wrapper"><div class="row" id="header"><div class="col-12"><img class="logo" src="img/flexy-logo.png"/></div></div><div class="row"><div class="col-12"><nav role="navigation" id="nav"><input class="trigger" type="checkbox" id="mainNavButton"><label for="mainNavButton" onclick>Menu</label><ul><li><a href="#">Home</a></li><li><a href="#">About Us</a></li><li><a href="#">Products</a></li><li><a href="#">Blog</a></li><li><a href="#">Specials</a></li><li><a href="#">Contact Us</a></li></ul></nav></div></div><div class="row"><div class="col-12"><img src="img/kite.png"></div></div><div class="row"><div class="col-12" style="padding: 2%;"><h2 class="dark">Welcome to Flexy!</h2></div></div><div class="row" style="background-color: #3C8BB6; padding: 5% 0 3%;"><div class="col-12"><img src="img/paper.png"></div></div><div class="row" style="background-color: #F6931E;"><div class="col-11"><h2>Get ready for take off!</h2></div><div class="col-3"><img class="circle" src="img/take-off.png"></div></div><div class="row" style="background-color: #1ABC9C;"><div class="col-11"><h2>We're flying around the globe.</h2></div><div class="col-3"><img class="circle" src="img/orange-globe.png"></div></div><div class="row" style="background-color: #E5EF3F;"><div class="col-11"><h2 class="dark">Above the clouds &amp; over the sea.</h2></div><div class="col-3"><img class="circle" src="img/waves.png"></div></div><div class="row" style="background-color: #34495E;"><div class="col-11"><h2>In just 42 hours and 27 minutes.</h2></div><div class="col-3"><img class="circle" src="img/plane.png"></div></div><div class="row" style="background-color: #00AFE1;"><div class="col-11"><h2>So come along for the ride!</h2></div><div class="col-3"><img class="circle" src="img/paper-blue.png"></div></div><div class="row"><div class="col-12"><img src="img/plane-background.png"></div></div><div class="row" style="background-color: #66D4FF;"><div class="col-12"><h2>Follow Us</h2></div></div><div class="row" style="background-color: #66D4FF;"><div class="col-12"><ul class="social"><li><a href="#"><i class="fa fa-facebook"></i></a></li><li><a href="#"><i class="fa fa-google-plus"></i></a></li><li><a href="#"><i class="fa fa-twitter"></i></a></li><li><a href="#"><i class="fa fa-youtube"></i></a></li><li><a href="#"><i class="fa fa-instagram"></i></a></li></ul></div></div><div class="row" style="background-color: #34495E; border-top: 2px solid 
    	#F6931E"><div class="col-12"><p>&copy; Flexy.</p></div></div></div> <!---End Wrapper--->