Center with transform translate

by Kevin Pliester

HTML

<link rel="stylesheet" href="https://necolas.github.io/normalize.css/5.0.0/normalize.css">
<div class="outer clearfix">

  <div class="container">
    <div class="inner">
    </div>
  </div>

</div>

CSS

.clearfix:after {
  content: ".";
  clear: both;
  display: block;
  visibility: hidden;
  height: 0px;
  }

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  }
  
*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  }

.outer {
  padding: 100px;
  width: 100%;
  background: #eee;
  position: relative;
  display: block;
}

.container {
  position: absolute; 
  top: 50%; 
  left: 50%;
  bottom: 50%; 
  right: 50%;
  }
  
.inner {
  background: #ff0000;
  width: 50px;
  height: 50px;
  position: relative;
  top: -50%;
  left: -50%;
  bottom: -50%;
  right: -50%;
  transform: translateY(-50%);
  }