title: HTML/CSS How to center DIV inside absolute DIV
body: <p>I have a problem I can't solve. i m trying to center this black box inside red box which has absolute position. I tried making the black box to relative position but i feel like i am missing something. </p>
  
  <p><strong>Ultimately, i m trying to make the top header.</strong> </p>
  
  <p>here is an image <a href="https://i.stack.imgur.com/4qaOQ.png" rel="nofollow">header-image.jpg</a></p>
  
  <p>Help? </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>body.esc-layout {
      min-width: 960px;
      margin: 0 auto;    
  }
  .promo-bar {
      display: block;        
  }
  .promo-bar .customer-care-wrapper {
      float: left;
      max-width: 50%;
  }
  .promo-bar .customer-care {
      font-size: 11px;
      color: #000;
      margin-left: 15px;
      display: block;
  }
  .promo-bar {
      width: 100%;
      min-height: 32px;
      position: relative;
      height: auto;
      overflow: visible;
      z-index: 5;
      background-color: #EEE;
      overflow: hidden;
    }
  .promo-bar .service-message-wrapper {
      padding-top: 2px;
      max-width: 50%;
      margin: 0 auto;
      position: relative;
     
      
  }
  
  .service-message-wrapper .service-banner{
      position: absolute;
      left: 0px;
      right: 0px;
      text-align: center;
      background: red;
  }
  .caption-wrapper{
      position: relative;
      background: black;
  }
  
  .service-message-wrapper .captions{
    
      font-family: inherit;
      font-style: italic;
      font-size: 14px;
      color: white;    
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body class="esc-layout"&gt;
          &lt;div class="promo-bar"&gt;
              &lt;div class="customer-care-wrapper promo-block"&gt;
                  &lt;div class="customer-care" style="padding-top:10px; padding-bottoms:12px;"&gt;
                      "      Contact us 24/7: "
                  &lt;/div&gt;
          
              &lt;/div&gt;
              &lt;div class="service-message-wrapper promo-block" style="height: 28px;"&gt;
                  &lt;div class="service-banner service-message-1" style="margin-top: 0px;"&gt;
                      &lt;div class="caption-wrapper"&gt;
                          &lt;p class="captions"&gt;
                          
                              &lt;span&gt; Same-day delivery to New York  &lt;/span&gt;   
                          &lt;/p&gt;
                      &lt;/div&gt;    
                  &lt;/div&gt;
              
              &lt;/div&gt;
          
          &lt;/div&gt;
         
          
      &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>