Как центрировать div над другим div все время

Question

Этот сценарий отличается от традиционного поля: 0 auto.

Я пытаюсь центрировать div над другим div, в то время как оба они находятся в одном div (не нужно выглядеть так, как будто они находятся в одном div, потому что синий ящик будет больше черного ящика сверху)!

Я создал скрипку того, что получил до сих пор, и я выровнял верхний div в центр сортировки, но его центр в смысле верхнего левого угла каждого div. Я хочу сосредоточиться в некотором смысле, что синий ящик находится над черным ящиком, но средняя линия синего квадрата выравнивается по средней линии черного ящика. Так что-то вроде этого

|______| 

    |__| 

телеприставки синего, нижнего ящика черного

Но я просто не могу придумать способ сделать это. Любая помощь или подсказка будут действительно оценены!

http://jsfiddle.net/adamchenwei/nay8fe5q/

HTML

<div class="blockcontainer"> 
    <div class="blockcenterbox"> 
     <div class="blocktop">abc</div> 
    </div> 
    <div class="blockbottom"></div> 
</div> 

CSS

.blockcontainer { 

    margin:0 auto; 

    width:25px; 

    background-color:#00CC66; 

} 

.blocktop { 

    width:100px; 

    background-color:#6699FF; 

    height:50px; 

} 

.blockcenterbox { 

    width: .1px; 

    height: 5px; 

    background-color: yellow; 

    margin: 0 auto; 

    position: relative; 

    float: none; 

} 

.blockbottom { 

    width:25px; 

    height:25px; 

    background-color:black; 

} 

Answer 1

Это то, что вы пытаетесь достичь?

.blue { 
 
    width: 200px; 
 
    height: 100px; 
 
    background-color: blue; 
 
} 
 

 
.black { 
 
    width: 150px; 
 
    height: 80px; 
 
    background-color: black; 
 
    margin: 0 auto; 
 
} 
 

 
.blockcontainer { 
 
    margin: 0 auto; 
 
    width: 200px; 
 
}

<div class="blockcontainer"> 
 
    <div class="blue"></div> 
 
    <div class="black"> </div> 
 
</div>

Answer 2

Попробуйте эту рабочую ссылку на plnkr: http://plnkr.co/edit/OaQBWxlIfa2fVvanKKEl?p=preview

Надеется, что это помогает !!! HTML

<div class="blockcontainer"> 
    <div class="blockcenterbox"> 
     <div class="blocktop">abc</div> 
    </div> 
    <div class="blockbottom"></div> 
</div> 

CSS

.blockcontainer { 
      width:200px; 
     height:200px; 
      background-color:#00CC66; 
     overflow:hidden; 

     } 

     .blocktop { 
      width:100px; 
      background-color:#6699FF; 
      height:50px; 

     } 

     .blockcenterbox { 
      width: 100px; 
      height: 50px; 
      background-color: yellow; 
      margin: 0 auto; 
     } 

     .blockbottom { 
      width:25px; 
      height:25px; 
      background-color:black; 
     margin: 0 auto; 
     }