Html 如何在引导4中居中放置卡？

我正在使用引导程序4 alpha 3。
我想把卡片水平地放在页面中间的中间。
<

预览/链接：

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

如何实现这一点？

为.card添加css

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

这是你的电话号码

更新：

---

您可以使用bootstrap 4中提供的类

.mx auto

将卡居中。

更新2019

不需要额外的CSS，在Bootstrap 4中有多个定心方法：

• 文本中心

  用于中心

  显示：内联

  元素

• mx auto

  用于居中

  display:block

  内部元件

  display:flex

  （d-flex）

• offset-*

  或

  mx auto

  可用于将网格列居中
• 或将

  行上的
  资源中心对齐
  ，使网格列居中

mx auto

（自动x轴边距）将居中于

显示：flex

具有定义宽度的元素（（、vw、px等）。默认情况下，Flexbox用于轴网柱，因此也有

在您的情况下，您可以简单地

mx auto

到卡。

您还可以使用Bootstrap 4 flex类 例如：

.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类用于将文本居中对齐

---

我基本上建议左右两侧的间距相等，并将“宽度”设置为“自动”。这里是：

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

---

将要移动到中心的元素放在此div标记内

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

bootstrap 4中的可能重复项，若要在网格列中居中卡，请使用。应用于全局是错误的做法，请参阅@ZimSystem了解正确的方法。这更像是CSS解决方案，而不是bootstrap解决方案。下面的答案更有意义。我在卡片中使用了img，但我必须移除card-img-top。要在卡片组内部将一张卡片居中对齐，请替换世界其他地区的卡片组，并使用此答案的第四个答案。顺便说一句，谢谢！