center img

by StandAloneC

HTML

<h4>absolute</h4>
<img id="pikachu" src="http://vignette3.wikia.nocookie.net/pokemontowerdefensetwo/images/e/e1/Pikachu_vector_by_paperjoey-d3919s8.png" class="center_absolute">
<br><br><br><br><br>
<h4>relative</h4>
<img id="pikachu" src="http://vignette3.wikia.nocookie.net/pokemontowerdefensetwo/images/e/e1/Pikachu_vector_by_paperjoey-d3919s8.png" class="center_relative">

CSS

.center_relative{
    position: relative;
    top:50%;
    left: 50%;
    transform:translate(-50%,-50%);
}
.center_absolute{
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

#pikachu{
  width:100px;
}