Bootstrap-如何在固定像素的行中居中列

Question

我有一个容器，它的最大宽度必须为960px。容器内部是一行，最大宽度为928px，其内部有2列。左边的col的最大宽度为576px，右边的col最大宽度为352px。如何将2列居中，使它们正好位于容器的中间？bootstrap 4的诀窍是什么？

<div class="d-flex justify-content-center align-self-center" style="max-width: 960px;">
<div class="container" style="max-width:960px;">
<div class="row" style="max-width:928px;">

<div class="col" style="max-width:576px;"> 
... data ...
</div>
<div class="col" style="max-width:352px;"> 
... data ...
</div>
</div>
</div>
</div>

我做了两张照片来展示问题所在和我最终想做什么(固定版本…(。非常感谢你的每一个回答！！！现在
必须是

Answer 1

假设容器不需要min-width或min-height，并且也需要它们垂直居中，这应该可以实现

.yellowBg {
background-color: yellow;
}

.tomatoBg {
background-color: tomato;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-center align-self-center" style="max-width: 960px; border: 2px solid black;">
<div class="row" style="max-width:960px;">
<div class="col d-flex justify-content-center align-items-center" style="max-width:928px;">

<div class="col d-flex flex-row flex-wrap justify-content-start yellowBg" style="max-width:576px;"> 
<p> stuff here </p>
<p> stuff here </p>
<p> stuff here </p>
<p> stuff here </p>
<p> stuff here </p>
<p> stuff here </p>
<p> stuff here </p>
<p> stuff here </p>
<p> stuff here </p>
<p> stuff here </p>
<p> stuff here </p>
<p> stuff here </p>
<p> stuff here </p>
<p> stuff here </p>
</div>

<div class="col d-flex flex-row flex-wrap justify-content-start tomatoBg" style="max-width:352px;"> 
<p> more stuff here </p>
<p> more stuff here </p>
<p> more stuff here </p>
<p> more stuff here </p>
<p> more stuff here </p>
<p> more stuff here </p>
<p> more stuff here </p>
<p> more stuff here </p>
<p> more stuff here </p>
</div>
</div>
</div>
</div>