如何在引导程序 4 中居中卡片？答案

【问题标题】：How to center cards in bootstrap 4?如何在引导程序 4 中居中卡片？
【发布时间】：2016-12-26 03:40:50
【问题描述】：

我正在使用 bootstrap 4 alpha 3。
我想使卡片在页面中间水平居中。

Preview / link:http://codepen.io/vaibhavsingh97/full/VjRAXW

我已经尝试了 bootstrap 4 卡片示例页面上列出的所有不同选项。

我怎样才能做到这一点？

【问题讨论】：

How to align a <div> to the middle (horizontally/width) of the page的可能重复

标签： html css bootstrap-4

【解决方案1】：

使卡片居中的一种方法是创建三个 div，第一个和最后一个具有相同的 col-val 像这样。

    <div class="container">
     <div class="row">
        <div class="col-md-3"></div>
         <div class="col-md-6">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur aut officia ducimus provident facilis nam doloremque porro autem corporis.</p>
         </div>
        <div class="col-md-3"></div>
     </div>
    </div>

【讨论】：

【解决方案2】：

<div class="container">
    <div class="row align-items-center vh-100">
        <div class="col-6 mx-auto">
            <div class="card shadow border">
                <div class="card-body d-flex flex-column align-items-center">
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                        the card's content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
    </div>
</div>

【讨论】：

【解决方案3】：

2019 年更新

不需要额外的CSS，Bootstrap 4中有多种居中方法：

text-center 用于中心 display:inline 元素
mx-auto 用于居中 display:block 内部的元素 display:flex (d-flex)
offset-* 或 mx-auto 可用于使网格列居中
或justify-content-center row 将网格列居中

mx-auto（自动 x 轴边距）将在 display:flex 具有定义宽度（%、vw、px 等）的元素内居中。网格列上默认使用flexbox，所以也有various centering methods。

在你的情况下，你可以简单地mx-auto 到卡片上。

【讨论】：

我将它与卡片中的 img 一起使用，但我不得不删除 card-img-top。
要将一张卡片对齐卡片组内的中心，将卡片组替换为行并使用此答案的第四个答案。顺便说一句，谢谢！

【解决方案4】：

您也可以使用 Bootstrap 4 弹性类

点赞：.align-item-center 和 .justify-content-center

我们可以对所有设备视图都使用这些类。

点赞：.align-item-sm-center, .align-item-md-center, .justify-content-xl-center, .justify-content-lg-center, .justify-content-xs-center

.text-center 类用于将文本居中对齐。

【讨论】：

【解决方案5】：

将要移动到中心的元素放在这个div标签内。

<div class="col d-flex justify-content-center">
</div>

【讨论】：

【解决方案6】：

我基本上建议左右间隙相等，并将宽度设置为自动。这里像：

.bmi {         /*my additional class name -for card*/
    margin-left: 18%;      
    margin-right: 18%;
    width: auto;
}

【讨论】：

【解决方案7】：

为 .card 添加 css

.card {
        margin: 0 auto; /* Added */
        float: none; /* Added */
        margin-bottom: 10px; /* Added */
}

这里是pen

更新： 您可以使用 bootstrap 4 中提供的 .mx-auto 类来居中卡片。

【讨论】：

在 bootstrap 4 中，要在网格 col 中居中卡片，请使用

.
申请全局是不好的做法，正确的方法见@ZimSystem。
这更像是一个 CSS 解决方案，而不是 Bootstrap 解决方案。下面的答案更有意义。
.mx-auto 完成了这项工作，谢谢！
顺便说一句：如果您需要将 div 水平和垂直居中，您可以使用m-auto（不带 x）。