是否有任何方法在主父元素中垂直或水平地居中html元素?
当前回答
我发现在Bootstrap 4中你可以这样做:
中心水平确实是文本中心类
中心垂直，但是使用bootstrap类添加mb-auto mt-auto，使margin-top和margin- bottom设置为auto。
其他回答
更新:虽然这个答案在2013年初可能是正确的，但现在不应该再用了。正确的解决方案使用偏移量，如下所示:
class="mx-auto"
至于其他用户的建议，也有本地引导类可用，如:
class="text-center"
class="pagination-centered"
对于水平居中，你可以这样做:
.centering{
float:none;
margin:0 auto
}
<div class="span8 centering"></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>
我发现在Bootstrap 4中你可以这样做:
中心水平确实是文本中心类
中心垂直，但是使用bootstrap类添加mb-auto mt-auto，使margin-top和margin- bottom设置为auto。
Bootstrap文档:
设置要显示的元素:块和居中通过边距。可作为mixin和类使用。
<div class="center-block">...</div>
