Center Vertical + Horizontal

From @sebastianekstrom idea.

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="X_centered icon-camera"><img src="http://dummyimage.com/100x100/000/fff" alt="">Lorem ipsum</span>
    </div>
</div>

CSS

.canvas {
    width:100%;
    height:500px;
    background: lightgrey;
    font-family: arial;
}
.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;
    border-radius: 50%;
}
.X_centered {
    display:inline-block;
    position: relative;
    background-color: #111;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
    font-size:1em;
    color:white;
    font-family: Arial;
}