title: I have an element centered in the screen and I want another element to be centered just right below the first element
body: <p>So, here's index.html</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
      &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
      &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class=&quot;circle&quot;&gt;
      &lt;div class=&quot;small-circle&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;strong&gt;&lt;span class=&quot;time-units&quot;&gt;
          &lt;span class=&quot;hours&quot;&gt;00&lt;/span&gt;:
          &lt;span class=&quot;minutes&quot;&gt;00&lt;/span&gt;:
          &lt;span class=&quot;seconds&quot;&gt;00&lt;/span&gt;:
          &lt;span class=&quot;nanoseconds&quot;&gt;00&lt;/span&gt;
      &lt;/span&gt;&lt;/strong&gt;
  
      &lt;div class=&quot;ui-buttons&quot;&gt;
          &lt;span&gt;
              &lt;button class=&quot;btn-start&quot;&gt;Start&lt;/button&gt;
              &lt;button class=&quot;btn-pause&quot;&gt;Pause&lt;/button&gt;
              &lt;button class=&quot;btn-stop&quot;&gt;Stop&lt;/button&gt;
          &lt;/span&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>And here's style.css</p>
  <pre class="lang-css prettyprint-override"><code>@import url('https://fonts.googleapis.com/css2?family=Anek+Latin:wght@600&amp;family=Kanit:wght@300&amp;family=Open+Sans&amp;family=PT+Sans&amp;family=Poppins:wght@300;500&amp;family=Roboto+Mono:wght@700&amp;family=Smooch+Sans:wght@300;900&amp;family=Source+Sans+Pro&amp;display=swap');
  
  body {overflow: hidden; font-family: 'Poppins', sans-serif;}
  
  body {
      background-color: #FFE53B;
      background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  }
  
  html, body { height: 100%; }
  
  .circle {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background-image: linear-gradient(#cc2b5e, #753a88);
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      padding: 50px;
      box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  }
  
  .time-units {
      padding: 20px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-family: 'Poppins', sans-serif;
  }
  
  .small-circle {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      padding: 10px;
      background-color: gold;
      box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  }
  
  .btn-start {
      box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
      padding: 5px;
  }
  
  button {
      width: 220px;
      height: 50px;
      border: none;
      outline: none;
      color: #fff;
      background-color: gold;
      font-family: 'Poppins', sans-serif;
      cursor: pointer;
      position: relative;
      z-index: 0;
      border-radius: 10px;
  }
  
  </code></pre>
  <p>I have a circle div with class of <code>circle</code> (Ignore the other class) and it's centered. Now I have 4 buttons with classes of ui buttons. I want them to be centered but just below the circular div and not overlap it which happens if I use <code>position: absolute;</code>, <code>top,left</code> set to <code>50%</code> and <code>transform: translate(-50%, -50%);</code></p>