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="X_centered_abs">
          <h1>Great December Deals</h1>
        </div>
        
        <span class="X_centered icon-camera"></span>
</div>

CSS

.canvas {
    width:500px;
    height:500px;
    background: lightgrey;
    position: relative;
}

.X_centered {
    display:inline-block;
    position: relative;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
    font-size:2em;
    color:white;
}

.X_centered_abs {
    display:inline-block;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
    font-size:2em;
    color:red;
}

h1{
  display: inline-block;
}