Q:

How to add text in the middle of the animation?

I stumbled upon this HTML/CSS animation on Codepen which is basically a rotating diamond. I have been trying to add a feature in there but have not been able to do so. I want some kind of a text for example "HELLO" in the middle of the diamond and when a user clicks the toggle button the "HELLO" text is in the middle of the diamond. But the text always gets attached to the side of the diamond. 
<div class='diamond-slice diamond-slice--1'>
        <div class='diamond-slice-a'>
          <div class='pavilion'>
            <div class='pavilion__face'></div>
          </div>
          <div class='diamond-slice-b'>
            <div class='facet'></div>
            <div class='top'></div>
          </div>
        </div>
      </div>
      "HELLO WORLD"
      <div class='diamond-slice diamond-slice--2'>

Is it possible to do this?

A:

What about this?
https://codepen.io/anon/pen/RePRrZ
I added 
<div class='diamond intro'>
  <div class="helloText">Hello</div>

And the CSS,
.helloText{
  position: absolute;
  top: 15px;
  margin-left: 100px;
  color: white;
}

