如何在 bootstrap 4 中将卡片居中？

Question

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

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

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

我怎样才能做到这一点？

Answer 1

为 .card 添加 css

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

这里是 pen

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

Answer 2

2019 年更新

不需要额外的CSS，在Bootstrap4:

中有多重居中方法

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

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

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

Answer 3

你也可以使用Bootstrap 4 flex 类

喜欢：.align-item-center 和 .justify-content-center

We can use these classes identically for all device view.

喜欢：.align-item-sm-center, .align-item-md-center, .justify-content-xl-center, .justify-content-lg-center, .justify-content-xs-center

.text-center class is used to align text in center.

Answer 4

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

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

Answer 5

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

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

Answer 6

<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>

Answer 7

一种使卡片居中的方法是创建三个 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>

Answer 8

将所有卡片放在 bootstrap 行中

<div class="row justify-content-center"> your cards loop </div>

如何在 bootstrap 4 中将卡片居中？

How to center cards in bootstrap 4?

html

css

bootstrap-4

你也可以使用Bootstrap 4 flex 类