CSS padding hack for create block with responsive square image

css-padding-hack.css

/* Example:
<div class="thumbnail">
  <div class="square-box">
     <a href="#"><img src="..." class="img-responsive" alt="..."></a>
  </div>
 </div>
 */

.square-box {
  display: table;
  position: relative;
  padding-bottom: 100%;
  width: 100%;
  height: 0;
  overflow: hidden;
}
.square-box .img-responsive {
  display: table-cell;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  text-align: center;
  vertical-align: middle;
}