css – 介于2 div之间

目前我已经尝试了所有我知道的但失败了.我的基本结构是这样的.

<div>
  <div class='pink-div'></div>
  <div class='blue-cirle-div'>
    <div> Some Text </div>
  </div>
  <div class='yellow-div'></div>
</div>

谢谢.

HTML：

<div class="main">
  <div class='pink-div'>&nbsp;</div>
  <div class='blue-cirle-div'>
    <div class="forsomeText">Some Text</div>
  </div>
  <div class='yellow-div'>&nbsp;</div>
</div>

CSS：

.主要{位置：相对;}

.pink-div {
    background: none repeat scroll 0 0 #feaec9;
    height: 110px;
}

.yellow-div {
    background: none repeat scroll 0 0 #b5e51d;
    height: 110px;
}

.blue-cirle-div {
    background: none repeat scroll 0 0 #3f47cc;
    border-radius: 110px;
    display: block;
    height: 140px;
    left: 50%;
    margin: 0 auto;
    position: absolute;
    text-align: center;
    top: 18%;
    vertical-align: middle;
}


.forsomeText {
    display: block;
    margin: 0 auto;
    padding: 60px 37px 37px;
    text-align: center;
    vertical-align: middle;
}

现场小提琴链接：

WORKING DEMO

我希望这有帮助.