共有3个答案
如果您试图将图像居中放置在div中，但图像无法居中，则可以这样描述您的问题：
这个问题的JSFIDLE演示
<div class="col-sm-4 text-center">
<img class="img-responsive text-center" src="myPic.jpg" />
</div>
img responsive类向图像标签添加display:block指令，从而停止text align:center（text center类）工作。
解决方案：
<div class="col-sm-4">
<img class="img-responsive center-block" src="myPic.jpg" />
</div>
解决方案的JSFIDLE演示
添加cent-block类将覆盖通过使用img-响应类放入的show： block指令。如果没有img响应类，图像将通过添加文本中心类来居中
此外，您应该知道flexbox的基础知识以及如何使用它，因为Bootstrap 4现在本机使用它。
这里是一个优秀的，快节奏的视频教程由布拉德希夫
这里有个很棒的备忘单
从引导文档中：
将一个元素设置为display:block并通过margin居中。可作为mixin和class提供。
<div class="center-block">...</div>
更新：虽然这个答案在2013年初可能是正确的，但不应该再使用了。正确的解决方案使用偏移，如下所示：
class="mx-auto"
对于其他用户，还可以使用本机引导类，如：
class="text-center"
class="pagination-centered"
-
问题内容： 有什么办法可以将html元素垂直或水平居中放置在主要父对象中？ 问题答案： 更新 ：虽然这个答案早在2013年初就可能是正确的，但现在不应该再使用。正确的解决方案使用offsets。 至于其他用户的建议，也可以使用本机引导程序类，例如：
-
有没有办法在主父级内垂直或水平居中html元素？
-
问题内容： 我试图将标签内容垂直居中，但是当我添加CSS样式时，水平文本对齐会消失。 如何为我的每个标签使文本对齐x和y？ 问题答案： 方法1- / ： 在受支持的浏览器（大多数）中，可以将/ 与组合使用， 以动态垂直/水平居中元素。 方法2-Flexbox方法： 在支持的浏览器中，将目标元素的设置为并用于垂直居中和水平居中。只是不要忘记为其他浏览器支持添加供应商前缀。 方法3- / ： 在某些情
-
我正在尝试垂直居中我的选项卡内容，但是当我添加CSS样式时，水平文本对齐消失了。 我如何使文本对齐x和y为我的每个选项卡？ null null
-
问题内容： 如何使用flexbox在容器内水平和垂直居中div。在下面的示例中，我希望每个数字都彼此相邻（按行），并水平居中。 问题答案： 我认为您想要以下内容。 你的元素应该是块级（而非）如果你想要的高度和顶部/底部填充，以正常工作。 另外，在上，将宽度设置为而不是。 您的属性很好。 如果您希望垂直居中于视口中，请为和分配100％的高度，然后将页边距清零。 请注意，需要一个高度才能看到垂直对齐效
-
如何使用FlexBox在容器内水平和垂直地居中div。在下面的例子中，我希望每一个数字在彼此下面（在行中），水平居中。 null null http://codepen.io/anon/pen/zlxbo