<div class="container"> <span class="img center absolute"></span> </div> <div class="container" style="margin-top: 20px;"> <span class="img center-translate absolute"></span> </div>
.container { position: relative; background-color: #eee; width: 200px; height: 200px; } .img { display: inline-block; width: 64px; height: 64px; background-color: green; } .absolute { position: absolute; top: 50%; left: 50%; } .center { margin-left: -32px; margin-top: -32px; } .center-translate { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }