如何在bootstrap 4中居中卡？

Question

我正在使用bootstrap 4 alpha 3 我希望将卡片水平居中放在页面中间。

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

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

我怎样才能做到这一点？

Answer 1

更新2018年

不需要额外的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到card s。

Answer 2

为.card添加css

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

这是pen

<强>更新 您可以使用bootstrap 4中可用的类.mx-auto来居中卡片。

Answer 3

将要移动的元素放在此div标签内。​​

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

Answer 4

您还可以使用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类用于在中心对齐文本。

Answer 5

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

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