中心（vert和horiz）Div over bootstrap容器

Question

想要学习如何将div放在容器上方，垂直和水平上方，而不是页面。在这里引用的小提琴中更有意义： https://jsfiddle.net/kylebellamy/j0h7j88a/

以容器为中心的重点是让它保持在中间四列的交叉点之上，而不是以页面本身为中心。

＆＃13;

＆＃13;

.hexagon {
  position: relative;
  width: 200px;
  height: 115.47px;
  background-color: rgba(255, 255, 255, 0.85);
  margin: 57.74px 0;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
}
.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 141.42px;
  height: 141.42px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 29.2893px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
}
.hexagon:before {
  top: -70.7107px;
}
.hexagon:after {
  bottom: -70.7107px;
}
/*cover up extra shadows*/

.hexagon span {
  display: block;
  position: absolute;
  top: 0px;
  left: 0;
  width: 200px;
  height: 115.4701px;
  z-index: 2;
  background: inherit;
}
.outlines {
  border: rgba(0, 0, 0, 1.00) 1px solid;
}
.nopadding {
  padding: 0 !important;
  margin: 0 !important;
}

＆＃13;

<div class="hexagon"><span></span>
</div>
<div class="container">
  <div class="row clearfix">
    <div class="col-md-6 column nopadding">
      <div class="outlines" style="height: 200px;">
      </div>
    </div>
    <div class="col-md-6 column nopadding">
      <div class="outlines" style="height: 200px;">
      </div>
    </div>
  </div>
  <div class="row clearfix">
    <div class="col-md-6 column nopadding">
      <div class="outlines" style="height: 200px;">
      </div>
    </div>
    <div class="col-md-6 column nopadding">
      <div class="outlines" style="height: 200px;">
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我想我得到了你所追求的...... https://jsfiddle.net/j0h7j88a/1/

我所做的就是添加：

.hexagon {
    position: relative;
    width: 200px;
    height: 115.47px;
    background-color: rgba(255,255,255,0.85);
    margin: 57.74px 0;
    box-shadow: 0 0 20px rgba(0,0,0,0.6);
    /* left & transform */
    left: 50%;
    transform: translateX(-50%);
}