Center a inline-block div that contains floating items - html

Question

Sorry if I posted something similar to other questions, but actually I needed solution. Well what I am trying to do is am creating gallery of images. So I have images of 200px, each image is block. So in order to center those image according to screen-sizes I am trying to wrap those images inside other div(i.e. inline-block). But its not ready to move in center.
I also want to mention that I am using this within a container.
.gallery{
display:inline-block; /* I am not sure what to do here */
}
.thumbnail{
width:200px;
height:200px;
border:1px solid #aaa;
border-radius:5px;
display:block;
}
.thumbnail img{
width:100%;
height:100%;
border:5px solid white;
border-radius:5px;
}
.gallery-item{
float:left;
margin:10px;
}
.clearfix:after{
clear:both;
}
.clearfix:after, .clearfix:before{
display:table;
content: " ";
}
.clearfix:after{
content:" ";
height:10px;
}
<div class="gallery">
<div class="thumbnail gallery-item">
<img src="images/slide1.jpg" />
</div>
<div class="thumbnail gallery-item">
<img src="images/slide1.jpg" />
</div>
<div class="thumbnail gallary-item">
<img src="images/slide1.jpg" />
</div>
<div class="thumbnail gallery-item">
<img src="images/slide1.jpg" />
</div>
<span class="clearfix"></span>
</div>

Answer 1

Don't use float property if you want elements to be centered.
.gallery {
font-size: 0; /*fix for white space */
text-align: center;
}
.thumbnail {
display: inline-block;
margin: 10px;
width: 200px;
height: 200px;
border: 1px solid #aaa;
border-radius: 5px;
box-sizing: border-box;
}
.thumbnail img {
max-width: 100%;
height: auto;
border: 5px solid white;
border-radius: 5px;
box-sizing: border-box;
}
<div class="gallery">
<div class="thumbnail">
<img src="http://placehold.it/200x200" />
</div>
<div class="thumbnail">
<img src="http://placehold.it/200x200" />
</div>
<div class="thumbnail">
<img src="http://placehold.it/200x200" />
</div>
<div class="thumbnail">
<img src="http://placehold.it/200x200" />
</div>
</div>
JSFiddle: http://jsfiddle.net/ntbh1rmk/

Answer 2

well since i need 50 reputation to comment (very stupid restriction in my opinion).. i was going to ask why you have 100% for width and height, then add 5px padding to it? isn't that like making it 100% + 10PX?
.thumbnail img{
width:100%;
height:100%;
border:5px solid white;
border-radius:5px;
maybe it's just how i'm being taught... (i'm in CSS class now).. but thats always been a bad thing.