horizontal transform 50% responsive img

by ian_smithz

HTML

<section class="fancypants-banner">

  <h1>I am a H1 - horizontally aligned</h1>
  
  <h2>I am a H2 - horizontally + vertically aligned</h2>
  
  <img src="http://via.placeholder.com/350x150" class="ri">
  
</section>

CSS

.fancypants-banner {
  position: relative;
  
  /* if cemtred element is looking blurry on a half pixel use this below */
  /* transform-style: preserve-3d; */
  
  /* demo purpose */
  height: 300px;
  border: 1px solid red;
  width: 80%;
  margin: 0 auto;
}

/* centre h1 horizontally */
.fancypants-banner h1 {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
  
  /* taken default margin off for demo */
  margin: 0;
}

/* centre h2 horizontally + vertically + z-index above img */
.fancypants-banner h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  
  /* taken default margin off for demo */
  margin: 0;
}

/* centre responsive image horizontally + vertically */
img.ri
{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
  max-width: 100%;
}