Bootstrap 4使用flex属性解决了这个问题。你可以使用这些类:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="d-flex align-items-center"> <button type="submit" class="btn btn-primary">创建</button> < / div >

这些类将使您的内容水平和垂直居中。

在Bootstrap 4中，你可以使用基于flex的HTML类d-flex、justify-content-center和align-items-center:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="d-flex align-items-center"> <button type="submit" class="btn btn-primary">创建</button> < / div >

来源:Bootstrap 4.1

更新:虽然这个答案在2013年初可能是正确的，但现在不应该再用了。正确的解决方案使用偏移量，如下所示:

class="mx-auto"

至于其他用户的建议，也有本地引导类可用，如:

class="text-center"
class="pagination-centered"

为bootstrap4垂直中心的少数项目

D-flex用于伸缩规则

用于项目垂直方向的弯曲列

Align-items-center用于水平定心

垂直居中的justification -content-center

Style ='height: 300px;'必须为设定点，其中中心为calc或使用h-100类

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/> < span class=" font - family -宋体-宋体-宋体-宋体-宋体-宋体-宋体-宋体-宋体-宋体-宋体-宋体-宋体" style=" 身高:300 px; " > <div class="p-2 bg-primary">Flex item</div> <div class="p-2 bg-primary">Flex item</div> <div class="p-2 bg-primary">Flex item</div> < / div >

对于水平居中，你可以这样做:

.centering{
float:none;
margin:0 auto
}

 <div class="span8 centering"></div>

如果你试图在div中居中一个图像，但图像不会居中，这可能描述了你的问题:

JSFiddle演示的问题

<div class="col-sm-4 text-center">
    <img class="img-responsive text-center" src="myPic.jpg" />
</div>

img-responsive类向图像标记添加了一个display:block指令，它将停止text-align:center(文本中心类)的工作。

解决方案:

<div class="col-sm-4">
    <img class="img-responsive center-block" src="myPic.jpg" />
</div>

解决方案的JSFiddle演示

添加center-block类将覆盖使用img-responsive类放入的display:block指令。如果没有img-responsive类，图像将仅通过添加文本中心类居中

此外，您应该了解flexbox的基础知识以及如何使用它，因为Bootstrap 4现在本机使用它。

这是布拉德·希夫制作的一个优秀的、快节奏的视频教程

这里有一个很棒的小抄