如何使用推特引导将元素水平或垂直居中？

Question

有没有办法在主父级内垂直或水平居中html元素？

Answer 1

如果您试图在div中居中图像，但图像不会居中，这可能会描述您的问题：

JSFIDLE问题演示

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

img响应的类向图像标签添加了显示：块指令，这会停止text-line： center（text-center类）从工作。

解决方案：

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

解决方案的JSFIDLE演示

添加中间块类将覆盖使用img responsive类输入的显示：块指令。如果没有img responsive类，只需添加文本中心类，图像就会居中

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

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

这是一个很棒的备忘单

Answer 2

从Bootstrap留档：

将元素设置为“显示：块”（block），并通过边距居中。可作为mixin和class提供。

<div class="center-block">...</div>

Answer 3

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

class="mx-auto"

对于其他用户的建议，还有一些本机引导类可用，如：

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