如何在引导程序中的两列中间居中放置一个方形 div？

Question

我有两列与col-6和超大屏幕这是我的代码：

  <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 。 问题是我无法像草图中那样在超大屏幕上获得方形 div。

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

https://jsfiddle.net/rmjy5pch/

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

Answer 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%;
}

Answer 2

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

Answer 3

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

尝试将 margin:0 auto 添加到 square 类？

Answer 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>

如何在引导程序中的两列中间居中放置一个方形 div？

问题描述

4 个解决方案

解决方案1
2 已采纳 2020-01-14 14:19:18

解决方案2
0 2020-01-14 14:09:40

解决方案3
0 2020-01-14 14:10:22

解决方案4
0 2020-01-14 14:29:30

如何在引导程序中的两列中间居中放置一个方形 div？

问题描述

4 个解决方案

解决方案1 2 已采纳 2020-01-14 14:19:18

解决方案2 0 2020-01-14 14:09:40

解决方案3 0 2020-01-14 14:10:22

解决方案4 0 2020-01-14 14:29:30

解决方案1
2 已采纳 2020-01-14 14:19:18

解决方案2
0 2020-01-14 14:09:40

解决方案3
0 2020-01-14 14:10:22

解决方案4
0 2020-01-14 14:29:30