如何在引导程序中将方形 div 居中在两列的中间？答案

【问题标题】：How to center a square div in middle of two columns in bootstrap?如何在引导程序中将方形 div 居中在两列的中间？
【发布时间】：2020-01-14 14:02:31
【问题描述】：

我在一行中有两列 col-6 和一个 jumbotron 这是我的代码：

  <div class="jumbotron text-left" style="background-image: url(https://mdbootstrap.com/img/Photos/Others/gradient1.jpg); background-size: cover;">
      <h1>Test</h1>   
    </div>          
    <div class="container-fluid">
    <div class="row">        
    <div class="col-md-12">        
    <p class="text-center square">TEST</p>        
    </div>        
    </div>
      <div class="row">
        <div class="col-sm-6">
          <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit </h3>           
        </div>
        <div class="col-sm-6">
          <h3>test</h3>        
        </div>   
      </div>
    </div>

这是我的样式：

.square {
  height: 50px;
  width: 50px;
  background-color: #9FB6A6;
  border-radius: 3px;  
}

这就是我想要实现的目标：

我尝试过的：

我使用了text-center 类和z-index。问题是我无法像草图中那样在 jumbotron 上获得方形 div。

这里你有一个 jsfiddle，所以你可以看到行为：

https://jsfiddle.net/rmjy5pch/

有人能指出我正确的方向吗？

【问题讨论】：

jsfiddle 的链接必须附有问题本身的代码

标签： javascript html css twitter-bootstrap bootstrap-4

【解决方案1】：

你可以像这样使用绝对定位来实现这一点

https://jsfiddle.net/oqyzsxc3/3/

<body>

<div class="jumbotron text-left" style="background-image: url(https://mdbootstrap.com/img/Photos/Others/gradient1.jpg); background-size: cover;">
  <h1>Test</h1>

</div>

<div class="container-fluid position-relative">
  <div class="square-container text-center">
    <p class=" square">TEST</p>
  </div>
  <div class="row">
    <div class="col-sm-6">
      <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit </h3>
    </div>
    <div class="col-sm-6">
      <h3>test</h3>
    </div>
  </div>
</div>
</body>

.square {
  height: 50px;
  width: 50px;
  background-color: #9FB6A6;
  border-radius: 3px;
  margin: 0 auto;
}

.square-container {
  position: absolute;
  top: -60px;
  width: 100%;
}

【讨论】：

【解决方案2】：

尝试将margin:0 auto; 添加到.square

【讨论】：

嗨！谢谢你的时间。正方形现在居中我想在 2（jumbtron 和下面的行）之间重叠我怎样才能将正方形向上移动一点？我试过margin bottom和padding bottom。

【解决方案3】：

.square {
  height: 50px;
  width: 50px;
  background-color: #9FB6A6;
  border-radius: 3px; 
  margin: -20px auto 0;
}

尝试在 square 类中添加 margin:0 auto 吗？

【讨论】：

嗨！谢谢你的时间。正方形现在居中我想在 2（jumbtron 和下面的行）之间重叠我怎样才能将正方形向上移动一点？我试过margin bottom和padding bottom。
你可以像这样给出一个负的上边距：margin: -20px auto 0;我现在已经用这个更新了答案

【解决方案4】：

使用 HTML 和 CSS

.root{
    display:flex;
    flex-direction:column;
    background:white;
    border: 0.5px solid black;
    position: relative;
}
.second{
    display:flex;
}
.first{
    height:120px;
    border-bottom: 0.5px solid black;
}
.second div{
    flex: 1;
    height:120px;
}
.centerTex{
    position:absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: red;
    color:white;
    padding: 10px 20px;
    border-radius:2px;
}

<div class="root">
  <div class="first">
   Jumbotron
  </div>
  <div class="centerTex">Test</div>
  <div class="second">
  <div>Col -6</div>
  <div>Col -6</div>
  </div>    
  </div>

【讨论】：