Twitter Bootstrap - 如何将元素水平或垂直居中

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

至于其他用户的建议，也有原生的bootstrap类可用，比如。

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

感谢@Henning和@trejder

来自Bootstrap文档。

将一个元素设置为display.block，并通过margin居中。 block"，并通过 "margin "居中。 可作为一个混搭和类使用。

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

对于未来这个问题的访问者。

如果你试图将div中的图片居中，但图片不会居中，这可能描述了你的问题。

[jsFiddle DEMO of the problem](https://jsfiddle.net/e0cr1nL2/)

<div class="col-sm-4 text-center">

</div>

img-responsive类在图片标签中添加了display:block指令，使text-align:center（text-center类）停止工作。

解决方法：{{12956525}。

<div class="col-sm-4">

</div>

[jsFiddle of the solution](https://jsfiddle.net/e0cr1nL2/1/)

添加center-block类，覆盖了使用img-responsive类放入的display:block指令。

如果没有img-responsive类，只要添加text-center类，图片就会居中。

更新。

另外，你应该知道flexbox的基础知识以及如何使用它，因为Bootstrap4现在使用它。

这里有一个优秀的，快节奏的[Brad Schiff的视频教程](https://www.youtube.com/watch?v=k32voqQhODc)

这里有一个很棒的攻略

*2018年更新。

在Bootstrap 4中，中心的方法发生了变化。

BS4中的水平中心。

• text-center仍用于display:inline元素。
• mx-auto取代center-block，使display:flex的孩子居中。
• offset-**或mx-auto可用于网格列居中。

mx-auto(自动X轴边距)将使display:block或display:flex元素居中，这些元素具有定义的宽度，(%, vw, px等)。 网格列上默认使用flexbox，所以也有各种flexbox居中的方法。

演示Bootstrap 4水平居中

关于BS4中的垂直对中，见 https://stackoverflow.com/a/41464397/171456。

你可以直接这样写进你的css文件。

.content {
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
  }

<div class = "content" >

   <p> some text </p>
  </div>

<！--结束片段-->

我使用这个

    html, body {
        height: 100%;
        margin: 0;
        padding: 0 0;
    }

    .container-fluid {
        height: 100%;
        display: table;
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }

    .row-fluid {
        height: 100%;
        display: table-cell;
        vertical-align: middle;
        width: 100%;
    }

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


    <div class="container-fluid">
        <div class="row-fluid">
            <div class="offset3 span6 centering">
                content here
            </div>
        </div>
    </div>

对于水平居中，你可以有这样的东西。

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

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

我喜欢类似问题的这个解决方案。 https://stackoverflow.com/a/25036303/2364401 在实际的表数据<td>和表头<th>元素上使用bootstrapstext-center类。 所以

<td class="text-center">Cell data</td>。

和

<th class="text-center">Header cell data</th>。

在bootstrap 4中，你可以使用flex

<div class="d-flex justify-content-center align-items-center">
    Create
</div>

来源：[bootstrap 4.1][1]。 [bootstrap 4.1][1]

[1]: https://getbootstrap.com/docs/4.1/utilities/flex/

我发现在Bootstrap 4中，你可以这样做。

center horizontal确实是text-center类。

center vertical然而使用bootstrap类是同时添加mb-auto mt-auto，使margin-top和margin bottom设置为自动。

对于 [bootstrap4][1] 少数项目的垂直中心点。

d-flex为flex规则

flex-column用于项目的垂直方向。

justify-content-center用于居中。

style='height.300px;'必须有，用于计算中心点的设置点或使用h-100类。 300px;'必须要有中心点的设置，可以计算或使用h-100**类。

<div class="d-flex flex-column justify-content-center bg-secondary" style="
    height: 300px;
">
    <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> 

[1]: https://getbootstrap.com/docs/4.3/utilities/flex/#justify-content

bootstrap 4 + Flex解决这个问题

你可以用

<！--开始片段。 js hide: false console: true babel.false --> -- begin snippet: js hide: false console: true false -->

<div class="d-flex justify-content-center align-items-center">
    Create
</div>

<！--结束片段-->

它应该在水平和垂直方向上居中。