Center image in html button

You can also set absolute position for the image and negative translate, this way you are able to set any size of the button without changing the padding again.

.tallButton{
   position:relative;
   width:200px;
   height:200px;
}

.tallButton img {
  position:absolute;
  top: 50%;
  left:50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

http://jsfiddle.net/QgTkt/292/

The best way to do this is not to set the dimensions of the button, but to simply rely on padding. Obviously you should put these styles into a style sheet, as shown below.

DEMO: http://jsfiddle.net/QgTkt/4/

.tallButton {
  padding: 50px 10px;
}

.wideButton {
  padding: 10px 50px;
}

.equalButton {
  padding: 10px;
}

<button type="button" class="equalButton">
        <img src="http://dummyimage.com/32x32/ff0/000">
    </button>

<br /><br /><br />

<button type="button" class="wideButton">
        <img src="http://dummyimage.com/32x32/ff0/000">
    </button>

<br /><br /><br />

<button type="button" class="tallButton">
        <img src="http://dummyimage.com/32x32/ff0/000">
    </button>