Center Vertical + Horizontal

From @sebastianekstrom idea.

by ian_smithz

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<div class="canvas">
  <div class="center_VH">
    <span class="dot"></span>
  </div>
</div>

CSS

.canvas {
  width: 500px;
  height: 500px;
  background: lightgrey;
}
.center_VH {
  display: inline-block;
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background: darkgrey;
}
.dot {
  display: inline-block;
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #ed1c24;
  border-radius: 50%;
  border: 1px solid #fff;
  width: .25em;
  height: .25em;
}