JSFiddle - React, Tailwind, and code Playground

by halirgb

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
        <div class="welcome-box">
            <h1>Hello, My name is Eric</h1>
            
        </div>
    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700);
body{
    font-family: 'Open Sans', sans-serif;
}
.welcome-box{
    width:80%;
    margin:0 auto;
    background-color:red;
    padding:20px;
}
.welcome-box h1{
    margin-top:0;
    font-size:32px;
    font-weight:300;
    text-align:center;
}

JavaScript

function centerBox(className){
    var windowHeight = $(window).height() / 2;
    var elementHeight = $(className).innerHeight() / 2;
    var math = windowHeight - elementHeight;
    $(className).css('margin-top', math);
    
}


centerBox('.welcome-box');
$(window).resize(function(){
    centerBox('.welcome-box');
});