pseudo topdown center

vertical-align

by ilake

HTML

<div class="wrapper">
  <div class="center"></div>  
</div>

CSS

.wrapper {
  height: 300px;
  background-color: white;
  text-align: center;
}

.wrapper:before {
  height: 100%;
  vertical-align: middle;
  content: " ";
  display: inline-block;
}

.center {
  height: 100px;
  width: 100px;
  vertical-align: middle;
  display: inline-block; 
  background-color: red;
}