Untitled

<div id="a1" class="square">

    <img src="http://png-4.findicons.com/files/icons/380/chess/48/black_queen_2d.png">

</div>

<div id="a2" class="square">

    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Chess_bdt45.svg/50px-Chess_bdt45.svg.png">

</div>

<div id="a3" class="square">

    <img src="http://png-4.findicons.com/files/icons/380/chess/48/black_queen_2d.png">

</div>

<div id="a4" class="square">

    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Chess_bdt45.svg/50px-Chess_bdt45.svg.png">

</div>

<div id="a5" class="square">

    <img src="http://png-4.findicons.com/files/icons/380/chess/48/black_queen_2d.png">

</div>

<div id="a6" class="square">

    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Chess_bdt45.svg/50px-Chess_bdt45.svg.png">

</div>

<div id="a7" class="square">

    <img src="http://png-4.findicons.com/files/icons/380/chess/48/black_queen_2d.png">

</div>

<div id="a8" class="square">

    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Chess_bdt45.svg/50px-Chess_bdt45.svg.png">

</div>

html {

  padding: 100px 0;

  background-color: #eee

}

body {

  width: 960px;

  margin: 0 auto;

}

.square {

    position: relative;

    width: 120px;

    height: 120px;

    float: left;

}

.square:nth-child(odd) { background-color: #1D1D1D }

.square:nth-child(even) { background-color: #fff }

.square img {

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    margin: auto

}