horizontal centre

by ian_smithz

HTML

<link rel="stylesheet" href="http://mrchfix.sfd.net/assets/css/sfx.min.css">


<div class="container">

  <h1><span class="blue-head">GREAT</span><span class="red-head"> DECEMBER DEALS</span></h1>

</div>

<br><br>

<div class="container2">

  <h2><span class="blue-head">GREAT</span><span class="red-head"> DECEMBER DEALS</span></h2>

</div>



<div class="banner-mg-wrap">
			<img data-src-small="http://www.screwfix.com/images/CAT127/assets/gfx/autumnfour_headerbanner_sm.jpg" data-src-medium="http://www.screwfix.com/images/CAT127/assets/gfx/autumnfour_headerbanner_md.jpg" data-src-large="http://www.screwfix.com/images/CAT127/assets/gfx/autumnfour_headerbanner_lg.jpg" class="swap" data-alt="Great December Deals" src="http://www.screwfix.com/images/CAT127/assets/gfx/autumnfour_headerbanner_lg.jpg">
				</div>

CSS

.container {position: relative}

.container2 {  
  margin: 0 auto;
  width: 50%;
  }

h1 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translatey(-50%);
	}
  
h2 {

}