Twitter Bootstrap – 如何水平或垂直居中元素
有没有什么办法来垂直或水平内部主要父母的HTML元素？
更新 ：虽然这个答案可能是在2013年初正确的，它不应该再被使用。 正确的解决scheme使用偏移 。
至于其他用户的build议，也有本地引导类可用，如：
class="text-center" class="pagination-centered"
感谢@Henning和@trejder
从Bootstrap文档 ：
设置要
display: block的元素display: block和中心通过margin。 可作为混合和类。
<div class="center-block">...</div>
对于未来这个问题的访问者：
如果您试图在一个div中对图像进行居中，但图像不居中，这可能会描述您的问题：
jsFDdle的问题的DEMO
<div class="col-sm-4 text-center"> <img class="img-responsive text-center" src="myPic.jpg" /> </div>
img-responsive类在image标签中添加了一个display:block指令，这样可以停止text-align:center （ text-center class）的工作。
解：
<div class="col-sm-4"> <img class="img-responsive center-block" src="myPic.jpg" /> </div>
jsFiddle的解决scheme
添加center-block类会覆盖使用img-responsive类放入的display:block指令。
如果没有img-responsive课程，图片只会添加text-center课程
你可以直接写入你的CSS文件，如下所示：
.content { position: absolute; top: 50%; left:50%; transform: translate(-50%,-50%); }
<div class = "content" > <p> some text </p> </div>
我用这个
<style> 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; } </style> <body> <div class="container-fluid"> <div class="row-fluid"> <div class="offset3 span6 centering"> content here </div> </div> </div> </body>
对于horizontaly中心你可以有这样的事情：
.centering{ float:none; margin:0 auto } <div class="span8 centering"></div>
2017年更新
在Bootstrap 4中 ，对中方法已经改变。
BS4中的水平中心
-
text-center仍然用于display:inline元素 -
mx-auto将center-blockreplace为中心display:block元素 -
offset-*或mx-auto可用于居中网格列
mx-auto （自动x轴边距）将居中display:block或display:flex具有定义宽度 （ % ， vw ， px等）的display:flex元素。 Flexbox在网格列上默认使用 ，所以也有各种柔版盒居中方法。
演示引导4水平居中
对于BS4中的垂直居中，请参阅 https://stackoverflow.com/a/41464397/171456
我喜欢这个类似问题的解决scheme。 https://stackoverflow.com/a/25036303/2364401在实际表数据;<td>和表头<th>元素上使用bootstraps text-center类。 所以
<td class="text-center">Cell data</td>
和
<th class="text-center">Header cell data</th>
