我正在尝试在2个boostrap列的垂直和水平中间放置一些文本，这些文本要全高且权重相等。结果应该如下图所示。
image describing div overlaying columns
我试图在主容器内但在列外添加一个容器，但这会使它在两个boostrap列外。我也尝试使用z-index，但是那也没有用。
<body>
<div class="container-fluid">
<div class="row h-100">
<div class="col-6 left-side h-100">
<h2 class='h2-mainpage'><span class="initial"><strong>D</strong></span>IGITAL <span class="initial"><strong>W</strong></span>ORKSHOPS</h2>
</div>
<div class="col-6 right-side h-100">
</div>
</div>
<div class="centertext">Elevating Passions through technology</div>
</div>
</body>
最佳答案
将.centertext移到.row.h-100内
将.container-fluid > .row设为相对容器
使用.centertext的绝对中心transform
/* Decoration — ignore */
h2 { text-align: center; }
.container-fluid>.row {
position: relative;
}
.centertext {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
background-color: white;
padding: 2em 2.5em;
text-align: center;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
<div class="row h-100">
<div class="col-6 left-side h-100">
<h2>Header</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed delectus inventore nemo. Odit qui in voluptatibus, quasi eius architecto deleniti iusto quidem id blanditiis aspernatur corporis soluta placeat quis voluptates!</p>
</div>
<div class="col-6 right-side h-100">
<h2>Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, ab in. Nulla modi explicabo laudantium sequi, nesciunt vero ratione tempore est! Ipsa quas minima aliquam eius, quia iste consequatur sapiente!</p>
</div>
<div class="centertext">Elevating Passions through technology</div>
</div>
</div>jsFiddle
关于html - 如何在2个boostrap列的中心放置html元素(div或段落)？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54701908/