How would I add text to the middle of the image?

[asasass]

Edit fiddle - JSFiddle - Code Playground

http://testpage34567.blogspot.com/

<div class='outer'>
  <div class='tcell'>
    <div class='wrap'>
      <div class='inner'>
        <div class='image' onclick='thevid=document.getElementById(&apos;thevideo&apos;); thevid.style.display=&apos;block&apos;; this.style.display=&apos;none&apos;; document.getElementById(&apos;iframe&apos;).src = document.getElementById(&apos;iframe&apos;).src.replace(&apos;autoplay=0&apos;,&apos;autoplay=1&apos;);'/> </div>

          <div id='thevideo' style='display: none;'>

            <iframe frameborder='0' id='iframe' src='https://www.youtube.com/embed/bU8fLRxB4nI?rel=0&amp;keyboard=1&amp;disablekb=1&amp;vq=medium&amp;showinfo=0&amp;controls=1&amp;autoplay=0&amp;iv_load_policy=3&amp;fs=0&amp;wmode=transparent'/>
          </div>
        </div>
      </div>
    </div>

    html,
    body {
      height: 100%;
      background: #000;
      color: #fff;
      padding: 0;
      margin: 0;
    }
    
    .outer {
      display: table;
      height: 100%;
      margin: 0 auto;
      width: 100%;
    }
    
    .tcell {
      display: table-cell;
      vertical-align: middle;
    }
    
    .wrap {
      max-width: 400px;
      position: relative;
      margin: auto;
      border: 0px solid #5CB378;
    }
    
    .inner {
      position: relative;
      height: 0;
      padding-bottom: 100%;
      cursor: pointer;
      background-color: black;
    }
    
    #thevideo,
    .image {
      position: absolute;
      left: 0px;
      top: 0px;
      right: 0px;
      bottom: 0px;
      height: 100%;
      width: 100%;
      background-color: #000000;
      cursor: pointer;
      overflow: hidden;
    }
    
    #thevideo iframe {
      width: 100%;
      height: 100%
    }
    
    .image {
      background: url('http://i.imgur.com/6cKbjZ7.png');
      background-size: cover;
      border-radius: 50px;
    }

[TechnoBear]

You seem to be using the same code here and in your other topic: How would I add a transparent image over an image?

Are you wanting to add both text and a transparent image at the same time? If so, it would be better to combine the topics.

[asasass]

No, only text here, I’m trying different methods to see which one I like the best.

[asasass]

If I wanted to do text instead of the transparent image, how would I set that up?

.image:after{
  content:"";
  margin: auto;
  position:absolute;
  width: 100px;
  height: 100px;
  left:0;
  top:0;
  right:0;
  bottom:0;
  background:url(https://i.imgur.com/DDdKwlk.png) no-repeat 0 0;
  background-size:cover;
  }