horizontal and vertical versions transform 50%

by ian_smithz

HTML

<h4>Horizontally centred transform positioned image</h4>

<div class="position-relative h-100 border">

  <img class="horizontal-centre-transform-positioned-image mw-100p" src="http://www.screwfix.com/images/general/assets/gfx/guaranteedtough_lg.png">

</div>

<h4>Vertically and horizontally centred transform positioned image</h4>

<div class="position-relative h-100 border">

  <img class="vertical-horizontal-centre-transform-positioned-image mw-100p" src="http://www.screwfix.com/images/general/assets/gfx/guaranteedtough_lg.png">

</div>

CSS

.horizontal-centre-transform-positioned-image {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0);
}

.vertical-horizontal-centre-transform-positioned-image {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


/* just for demo */
.position-relative {position: relative}
.h-100 {height: 100px}
.border {border: 1px solid #d1d1d1}
.mw-100p {max-width: 100%}