我试图在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>