title: How to display the text left and right side at the bottom if div is the center of the screen
body: <p>I am displaying the box with text in the center of the screen which is working. Now I am adding the footer at the bottom but that is displaying at the top because my div is absolute. I have to display at the bottom with the left and right text.</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-css lang-css prettyprint-override"><code>  .bg_cyan{background-color: #5AFCEB;}
    .center_screen{
      position: absolute;
      left: 50%;
      transform: translate(-50%,-50%);
    }
    .thankyou_set{top: 50%;}
    .thankyou_set .thanku_popup3{
     width: 100%;
     margin: auto;
     box-sizing: border-box;
     padding: 50px;
     background-color: red;
    }
    .thankyou_content h2{font-size: 30px;}
  
    .form_terms{
     margin: 0;padding: 0;list-style: none;
     float: right;
    }
    .form_terms li{display: inline-block;margin: 10px;}
    .form_terms li a{color: #5e5e5e;font-size: 18px;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;div class="container"&gt;
    &lt;div class="clearfix"&gt;
  
    &lt;div class="thankyou_set center_screen"&gt;
     &lt;div class="thanku_popup3"&gt;
      &lt;div class="thankyou_content"&gt;
       &lt;h2&gt;Thank you for registering!&lt;/h2&gt;
       
      &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
  
  
    &lt;/div&gt;
    &lt;div class="corp_footer"&gt;
     &lt;div class="form_copy_right pull-left"&gt;
     &lt;p&gt;&amp;#169; All right reserved&lt;/p&gt;
    &lt;/div&gt;
     &lt;ul class="form_terms"&gt;
      &lt;li&gt;&lt;a href="website"&gt;Website&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="about"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="privacy-policy"&gt;Privacy Policy&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
    &lt;/div&gt;
  
  
   &lt;/div&gt;
    </code></pre>
  </div>
  </div>
  
  I am getting the output
  <a href="https://i.stack.imgur.com/OHJcq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OHJcq.png" alt="enter image description here"></a></p>