Html 在引导中堆叠3个居中div

在我的react redux应用程序的主体中，我尝试堆叠三个div，并使它们居中并堆叠。有两个只是文本，它们居中没有问题，但是中间是偏移的，文本堆叠在它上面

<div className="row">
            <div className="col-12">
                <div className="row">
                    <div className="col-12 text-center">
                        <h3>Swipe Right to Select, Left to Discard!</h3>
                    </div>
                </div>
            <div className="row">
                <div className='col-12 d-flex justify-content-center text-center'>
                    <span>
                    {data.map((restaurant) =>
                    <TinderCard className='swipe' key={restaurant.name} onSwipe={(dir) => this.swiped(dir, restaurant.name, data)} onCardLeftScreen={() => this.outOfFrame(restaurant.name)}>
                        <div style={{ backgroundImage: 'url(' + restaurant.image_url + ')' }} className='card'>
                        <h3 style={{ backgroundColor: 'white' }}>{restaurant.name}</h3>
                        </div>
                    </TinderCard>
                    )}
                    </span>
                </div>
            </div>
            <div className="row">
                <div className="col-12 text-center">
                    {(this.state.cardCount !== 0) ?
                    this.state.lastDirection ? 
                    (this.state.lastDirection !== "right") ? 
                    <h2 className='infoText'>You deleted {this.state.restaurant}</h2> : 
                    <h2 className='infoText'>You choose {this.state.restaurant}</h2> : 
                    <span/> : 
                    <><h2 className='infoText'>You're All Done!</h2>
                    <button  className="contentButton" onClick={(e) => this.onSubmit(e, data)}>Submit Selections</button></>}
                </div>
            </div>
        </div>
    </div>

向右滑动选择，向左滑动放弃！
{data.map（（餐厅）=>
this.swiped（dir，restaurant.name，data）}onCardLeftScreen={（）=>this.outOfFrame（restaurant.name）}>
{餐厅名称}
)}
{（this.state.cardCount！==0）？
这个州最后一个方向？
（this.state.lastDirection！=“右”）？
您删除了{this.state.restaurant}：
您选择{this.state.restaurant}：
: 
你都完了！
this.onSubmit（e，data）}>submitselections}