Center with vh and translate

by Matthew Day

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div>Text</div>

CSS

body {
   margin: 0px;
}

div {
   position: absolute;
   background-color: red;
   /* Start at the center */
   top: 50%;
   left: 50%;
   /* Then move up and left 50% */
   transform: translate(-50%, -50%);
   min-height: 100vh;
   width: calc(100vh/3);
}

JavaScript

// 

// From http://stackoverflow.com/questions/34422175/css-placing-a-container-with-defined-proportions-as-huge-as-possible-on-the-win