有没有办法在主要父母中垂直或水平居中html元素？
问问题
581939 次
12 回答
254
更新：虽然这个答案在 2013 年初可能是正确的，但不应再使用它。正确的解决方案使用 offsets，如下所示：
class="mx-auto"
至于其他用户的建议，还有本地引导类可用，例如：
class="text-center"
class="pagination-centered"
于 2013-02-01T09:09:01.993 回答
76
于 2014-04-22T21:47:55.943 回答
55
如果您试图在 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的基础知识以及如何使用它，因为Bootstrap 4 现在原生使用它。
这是Brad Schiff提供的出色的快节奏视频教程
这是一个很棒的备忘单
于 2016-01-01T22:17:04.343 回答
35
在Bootstrap 4中，居中方法发生了变化。
Bootstrap 4中的水平中心
text-center仍然用于display:inline元素mx-auto取代center-block中心display:flex儿童offset-*或mx-auto可用于居中网格列
mx-auto（自动 x 轴边距）将居中display:block或display:flex具有定义宽度的元素、（%、、、等）。网格列上默认使用弹性盒，因此弹性盒居中的方法也多种多样。vwpx
对于 BS4 中的垂直居中，请参阅 https://stackoverflow.com/a/41464397
于 2017-03-20T14:10:59.490 回答
30
您可以像这样直接写入您的 CSS 文件：
.content {
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
}<div class = "content" >
<p> some text </p>
</div>于 2016-03-22T11:19:30.567 回答
8
我用这个
<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>
于 2013-06-19T21:16:38.210 回答
7
对于水平居中，你可以有这样的东西：
.centering{
float:none;
margin:0 auto
}
<div class="span8 centering"></div>
于 2013-04-06T16:52:57.353 回答
7
使用 Bootstrap 4，您可以使用基于 flex 的 HTML 类d-flex、justify-content-center和align-items-center：
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-center align-items-center">
<button type="submit" class="btn btn-primary">Create</button>
</div>来源：引导 4.1
于 2018-07-12T13:14:49.873 回答
4
我喜欢类似问题的解决方案：
text-center在实际的表数据<td>和表头<th>元素上使用引导程序的类。所以
<td class="text-center">Cell data</td>和<th class="text-center">Header cell data</th>
于 2015-06-18T12:56:20.133 回答
2
Bootstrap 4 使用 flex 属性解决了这个问题。您可以使用这些类：
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-center align-items-center">
<button type="submit" class="btn btn-primary">Create</button>
</div>这些类将使您的内容水平和垂直居中。
于 2019-08-19T10:20:21.203 回答
1
我在 Bootstrap 4 中发现你可以这样做：
中心水平确实是text-center类
center vertical但是使用引导类会添加两者mb-auto mt-auto，以便将边距顶部和边距底部设置为自动。
于 2018-11-19T15:19:51.960 回答
0
对于bootstrap4几个项目的垂直中心
d-flex用于弹性规则
用于项目垂直方向的flex-column
align-items-center用于水平居中
justify-content-center用于垂直居中
样式='高度：300px;' 必须具有中心为计算或使用h-100类的设定点
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-column align-items-center 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>于 2019-05-29T10:48:22.320 回答