HTML/CSS How to center DIV inside absolute DIV

Question

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.

Ultimately, i m trying to make the top header.

here is an image header-image.jpg

Help?

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;    
}

<body class="esc-layout">
        <div class="promo-bar">
            <div class="customer-care-wrapper promo-block">
                <div class="customer-care" style="padding-top:10px; padding-bottoms:12px;">
                    "      Contact us 24/7: "
                </div>
        
            </div>
            <div class="service-message-wrapper promo-block" style="height: 28px;">
                <div class="service-banner service-message-1" style="margin-top: 0px;">
                    <div class="caption-wrapper">
                        <p class="captions">
                        
                            <span> Same-day delivery to New York  </span>   
                        </p>
                    </div>    
                </div>
            
            </div>
        
        </div>
       
        
    </body>

joews · Answer 1 · 2016-10-18T21:20:16.100

You can use position: absolute with a combination of top and transform.

The trick is that in top: 50%, the 50% refers to the parent height. In transform, 50% refers to the element's own height.

.outer {
  height: 50px;
  width: 50%;
  position: absolute;
  top: 0;
  right: 0;
  background: red;
 }

.inner {
  position: absolute;
  left: 0;
  

  /* make the top edge of .inner appear in the vertical center of .outer */
  top: 50%;
 
  /* move .inner up by half of its height so that its middle is in the middle of .outer */
  transform: translateY(-50%);

  height: 20px;
  width: 100%;
  background: black;
 }

<div class="outer">
  <div class="inner"></div>
</div>

More info: http://howtocenterincss.com/

score 0 · Answer 2 · edited Oct 28 '16 at 17:54

For center div it is very easy to use flex box.

div.outer {
  align-items: center;
  background: red none repeat scroll 0 0;
  display: flex;
  height: 50px;
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
}

div.inner {
  background: black none repeat scroll 0 0;
  height: 20px;
  left: 0;
  width: 100%;
}

<html><head>
    </head>

<body>
    <div class="outer">
       <div class="inner"></div>
    </div>

</body>
</html>

Do not forget using webkit for safari and chrome and in your case I think it's better to set margin:0 for <p> for better control

p.captions{margin:0;}

score 0 · Answer 3 · answered Oct 18 '16 at 22:25

Centering inside an absolute element, the inner element needs to be absolute give a width and height.

.red-box{
background-color:red;
width:400px;
height:400px;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}

.black-box{
background-color:black;
width:200px;
height:200px;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;

}

<div class="red-box">
        <div class="black-box"> </div>
</div>

working sample (click run button)

HTML/CSS How to center DIV inside absolute DIV

3 Answers3