javascript - Verticle and Horizontal align text link in span over background image -

i have looked way of doing have not been able use of techniques particular problem. sorry if obvious using html first time.

i have background image on page in case relevant.

over have heading (h1) in series of 3 spans transparent background, centered horizontally.

i want use same style (h2) want center horizontally and vertically while keeping background in span. @ moment can kind of adding dummy heading (h2) in middle , making big push (now h3) heading down. not ideal. there must way plonk on center code arrangement escapes me.

edit ... in addition, need text 'enter' link. :(

any appreciated. thanks.

this link fiddle
code...

 #container {text-align: center;}            .inner {display: inline-block;                 position: relative;}           .overflow {              float: right;              color: #ffffff;              font: 100% "arial narrow", arial;              font-weight: light;              font-style: italic;              letter-spacing: 2px;              background: rgb(0, 0, 0); /* fallback color */              background: rgba(0, 0, 0, 0.3);              padding: 1px;}           .overflow2 {              float: right;              color: #ffffff;              font: 700% "arial narrow", arial;              font-weight: light;              font-style: italic;              letter-spacing: 2px;              background: rgb(0, 0, 0); /* fallback color */              background: rgba(0, 0, 0, 0.0);              padding: 100px;}           .overflow3 {              float: right;              color: #ffffff;              font: 265% "arial narrow", arial;              font-weight: light;              font-style: italic;              letter-spacing: 5px;              background: rgb(0, 0, 0); /* fallback color */              background: rgba(0, 0, 0, 0.3);              padding: 1px;}  <h1>     <div id="container">         <span class="inner"></span>         <span class="inner"><div class="overflow">&nbsp headingtext nbsp</div></span>         <span class="inner"></span>      </div> </h1>  <h2>     <div id="container">          <span class="inner"></span>          <span class="inner"><div class="overflow2"></div></span>          <span class="inner"></span>     </div> </h2>  <h3>     <div id="container">         <span class="inner"></span>         <span class="inner"><div class="overflow3">&nbsp enter &nbsp</div></span>         <span class="inner"></span>     </div> </h3> 

you can center both vertically , horizontally using absolute positioning inside of relatively positioned element.

position: absolute; top:50%; left:50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); 

you use css on element want centered, , use position: relative on container element (the background image).

example: https://jsfiddle.net/94e8ezwn/1/

note: don't use multiple elements same id. ids meant unique element. #container, use class instead.