有什么办法可以在主要父级中垂直或水平居中html元素？
Twitter Bootstrap-如何将元素水平或垂直居中
第3146篇《Twitter Bootstrap-如何将元素水平或垂直居中》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共11个回答
使用bootstrap 4，您可以使用flex
<div class="d-flex justify-content-center align-items-center">
<button type="submit" class="btn btn-primary">Create</button>
</div>
bootstrap 4 + Flex解决此问题
您可以使用
<div class="d-flex justify-content-center align-items-center">
<button type="submit" class="btn btn-primary">Create</button>
</div>它应该居中水平和垂直居中
我喜欢类似问题的解决方案。https://stackoverflow.com/a/25036303/2364401text-center在实际的表数据<td>和表头<th>元素上使用bootstraps 类。所以
<td class="text-center">Cell data</td>
和
<th class="text-center">Header cell data</th>
对于水平居中，您可以具有以下内容：
.centering{
float:none;
margin:0 auto
}
<div class="span8 centering"></div>
您可以像这样直接写入您的css文件：
.content {
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
}<div class = "content" >
<p> some text </p>
</div>对于这个问题的未来访客：
如果您尝试将div中的图像居中，但该图像无法居中，则可以描述您的问题：
<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>
添加center-block该类将覆盖display:block使用img-responsive该类所放置的指令。
没有img-responsive课程，图像将仅通过添加text-center课程而居中
更新：
另外，您应该了解flexbox的基础知识以及如何使用它，因为Bootstrap4现在可以原生使用它了。
这是Brad Schiff精彩的快节奏视频教程
这是一个很棒的备忘单
我用这个
<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>
更新于2018
在引导4中，定心方法已经改变..
BS4中的水平中心
text-center仍用于display:inline元素mx-auto取代center-block中心display:flex儿童offset-*或mx-auto可用于居中网格列
mx-auto（自动x轴边距）将围绕display:block或display:flex具有一元件限定的宽度，（ ，，% 等。）。默认情况下，在网格列上使用Flexbox，因此还有多种flexbox居中方法。vwpx
有关BS4中的垂直居中的信息，请参见 https://stackoverflow.com/a/41464397/171456
更新：虽然这个答案早在2013年初就可能是正确的，但现在不应该再使用。正确的解决方案使用offsets。
至于其他用户的建议，也可以使用本机引导程序类，例如：
class="text-center"
class="pagination-centered"
感谢@Henning和@trejder
相似问题
问题类别
我在Bootstrap 4中发现可以执行以下操作：
中心水平确实是
text-center一流的中心垂直，但是使用引导程序类添加了两者，
mb-auto mt-auto因此margin-top和marginbottom被设置为auto。