html - CSS3 和 Bootstrap 3 - 如何将一个 div 放在 2 个 div 之上，在两者之间，在中间

Question

我在我的应用程序中使用 Bootstrap 3。我正在尝试创建两个矩形和一个较小的矩形，它位于两个矩形的顶部，在它们的“边界”中间，就像我所附的图像中看到的那样。这是我到目前为止所做的:

HTML:

<div class="row">
        <div class="col-sm-3 center">
            <!-- place holder for extra content-->
        </div> <!-- end of div lg col 3 -->
        <div  class="col-sm-3 center x">

        </div> <!-- end of div lg col 3 -->
        <div id="both">hello</div>
        <div class="col-sm-3 center x">

        </div> <!-- end of div lg col 3 -->
        <div class="col-sm-3 center">
            <!-- place holder for extra content-->
        </div> <!-- end of div lg col 3 -->
</div><!-- end of first row div-->

CSS3:

.center.x{
    border: 1px solid #d4d4d4;
}
.center{
    text-align: center;
}

#both{
    width:100px;
    height: 50px;
    border: 1px solid #d4d4d4;
    text-align: center;
    padding-top: 14px;
    color: #000000;
    position:absolute;
    z-index:10;
}
.x{
    width:200px;
    height:300px;
    background: #9ba3f7;
}

JSfiddle .

Answer 1

将最后一个居中元素定位为 absolute ，将元素偏移到居中并通过计算给出上边距，使其达到垂直居中或使用javascript计算。保持你的代码简单，我不明白为什么你连续有 4 个 div 而它只显示 2 个 div。

检查 fiddle

http://jsfiddle.net/hdvp0052/

HTML

        <div class="row">
            <div class="col-xs-6 center x">DIV 1</div>
            <div class="col-xs-6 center x">DIV 2</div>
       </div><!-- end of first row div-->
       <div class="col-xs-4 col-xs-offset-4 center x y">DIV 3</div>

CSS

 .center.x{
    border: 1px solid #d4d4d4;
}
.center{
    text-align: center;
}
.x{
    height:300px;
    background: #9ba3f7;
}
.y{
   height:50px;
    position:absolute;
    top:150px
}