如何使用Bootstrap4(bs4)将列中的两个圆形元素居中

Bootstrap 4 内置了原生工具类，无需额外编写大量自定义CSS即可实现居中，推荐以下两种常用方案：

方案1：仅水平居中（最简实现） #

你可以直接给两个col-6列添加text-center文本对齐类，即可让列内的圆形元素水平居中：

<div class="row">
    <div class="col-6 text-center">
        <div class="circle">
            <div class="circle__inner">
                <div class="circle__wrapper">
                    <div class="circle__content">Bla bla bla</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 text-center">
        <div class="circle">
            <div class="circle__inner">
                <div class="circle__wrapper">
                    <div class="circle__content">Bla bla bla</div>
                </div>
            </div>
        </div>
    </div>
</div>

你也可以选择给每个.circle元素添加BS4自带的mx-auto类实现水平居中，该方案适合.circle为固定宽度块级元素的场景：

<div class="circle mx-auto">
  <!-- 内部代码不变 -->
</div>

方案2：水平+垂直全居中 #

如果你的列容器有固定高度，需要让圆形在列内同时实现水平、垂直居中，使用BS4的弹性布局工具类即可：

<div class="row">
    <div class="col-6 d-flex justify-content-center align-items-center">
        <div class="circle">
            <div class="circle__inner">
                <div class="circle__wrapper">
                    <div class="circle__content">Bla bla bla</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 d-flex justify-content-center align-items-center">
        <div class="circle">
            <div class="circle__inner">
                <div class="circle__wrapper">
                    <div class="circle__content">Bla bla bla</div>
                </div>
            </div>
        </div>
    </div>
</div>

相关类说明：

• d-flex：将列元素设置为弹性容器
• justify-content-center：实现主轴（默认水平方向）子元素居中
• align-items-center：实现交叉轴（默认垂直方向）子元素居中

内容的提问来源于stack exchange，提问作者roro