title: Center text and toggle visibility
body: <p>I am trying to use html/Javascript to center some text and then toggle it between visible and invisible after a wait time of 3 seconds. I am using 
  a function in JS containing <code>setTimeout()</code> to change the display properties after 3s. However the text will neither appear nor vertically center although I have tried countless solutions. Here is what I have so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function myfunction() {
    document.getElementsByClassName("parent-class").style.display = "table";
    document.getElementById("h3").style.display = "table-cell";
    setTimeout(function() {
      document.getElementById("h3").style.display = "none";
    }, 3000);
  };
  myfunction();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.parent-class {
    width: 100%;
    height: 100%;
    text-align: center;
  }
  
  .parent-class&gt;h3 {
    vertical-align: middle;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent-class" style="display:none"&gt;
    &lt;h3&gt;+&lt;/h3&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If I don't set the property "display:none" to the parent class, the text (a cross) appears erroneously on the first page of my program. Not sure where to go from here as it feels like I've tried many display types and element configurations. Please help!</p>