title: How to center an animated image and unanimated text on a webpage, regardless of the device type, in HTML and CSS?
body: <p>I tried putting the animated image into a table, but the animation doesn't work in that case.</p>
  
  <p>I can only use HTML and CSS to make this work.</p>
  
  <p>I'm wanting to center the green, spinning circle on the page both vertically and horizontally, have the logo sit without spinning inside of the circle, and have text that changes every 5 seconds right beneath it, centered horizontally and not too far vertically from the edge of the circle.</p>
  
  <p>Right now, with the following code, the mobile version looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/cIHeE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cIHeE.png" alt="Mobile View"></a></p>
  
  <p>(The red circle circles the logo, which is also appearing smaller than I want it to be)</p>
  
  <p>The desktop view currently looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/NNgVs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NNgVs.png" alt="Desktop View"></a></p>
  
  <p>As you can see here, the logo is still slightly off center vertically and the circle is really close to the top of the screen, rather than center.</p>
  
  <p>So far I have in HTML:</p>
  
  <pre><code>&lt;div id="animatedLogo"&gt;
      &lt;div id="loadingCircle"&gt;
          &lt;img id="loadingLogo" src="../Content/images/HCSS_GooglePresentation_Spinner_Green.PNG" class="circle" /&gt;
      &lt;/div&gt;
      &lt;div id="wordLogo"&gt;
          &lt;img id="HCSSLogo" src="../Content/images/hcss logo2.jpg" class="logo" /&gt;
      &lt;/div&gt;
      &lt;div id="myPhrase" class="phrase"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  
  
  
  &lt;div class="main-container container-fluid"&gt;
      &lt;div class="row"&gt;
          &lt;div class="span6"&gt;
              &lt;form method="post" action="{responseUri}"&gt;
                  {responseFields}
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;link href="../Content/please-wait.css" rel="stylesheet" /&gt;
  &lt;script src="/Scripts/logoAnimation.js"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/formPostResponse.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>And in CSS I have:</p>
  
  <pre><code>#animatedLogo {
      text-align: center;
  }
  
  #loadingLogo {
      animation: rotation 2.5s infinite linear;
      min-height: 100%;
      min-width: 35%;
      padding: 1% 0;
  }
  
  @keyframes rotation {
      from {
          transform: rotate(0deg);
      }
  
      to {
          transform: rotate(359deg);
      }
  }
  
  #loadingCircle {
      min-height: 77%;
      min-width: 35%;
  }
  
  #wordLogo {
      width: 100%;
      height: 67%;
      position: absolute;
      top: 0;
      left: 0;
      /*padding: 5% 0;*/
      margin-top: 5%;
  }
  
  .circle {
  }
  
  .logo {
      width: 10%;
      padding: 11% 0;
  }
  
  .phrase {
      font-family: "Proxima Nova", sans-serif;
      font-size: 24px;
      font-style: oblique;
      position: absolute;
      /* top: 625px; */
      margin-left: 50%;
      /* text-align: center; */
      transform: translateX(-50%);
  }
  </code></pre>
  
  <p>(Added 3:58 pm on 6/20) In addition, I need to make sure the circle doesn't alter its shape and become an oval like it did here when I changed my solution to fit a suggested answer:</p>
  
  <p><a href="https://i.stack.imgur.com/dceJm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dceJm.png" alt="Circle Became an Oval"></a></p>
  
  <p>Added at 8:19 a.m. on 6/21/18The circle no longer becomes an oval! However, nothing is centered now.
  <a href="https://i.stack.imgur.com/8vxtC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8vxtC.png" alt="2nd Update"></a></p>
  
  <p><strong>Update as of 9:24 am</strong></p>
  
  <p>We're getting closer!! 
  <a href="https://i.stack.imgur.com/FbhbB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FbhbB.png" alt="Desktop View 9:12 am 6/21"></a>
  <a href="https://i.stack.imgur.com/sAdQs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sAdQs.png" alt="Mobile View 9:12 am 6/21"></a></p>
  
  <p>1) I realize that I probably should pick a certain ratio of the size of the logo to the size of the spinner to use so that the logo doesn't get so small on mobile versions. I'm searching the web for ideas, but if you know of one particularly fitting for this project, let me know!</p>
  
  <p>2) Now we need to get the phrases under the spinner, rather than out to the side.</p>