是否有任何方法在主父元素中垂直或水平地居中html元素?
当前回答
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 align-items-center"> <button type="submit" class="btn btn-primary">创建</button> < / div >
这些类将使您的内容水平和垂直居中。
其他回答
如果你试图在div中居中一个图像，但图像不会居中，这可能描述了你的问题:
JSFiddle演示的问题
<div class="col-sm-4 text-center">
<img class="img-responsive text-center" src="myPic.jpg" />
</div>
img-responsive类向图像标记添加了一个display:block指令，它将停止text-align:center(文本中心类)的工作。
解决方案:
<div class="col-sm-4">
<img class="img-responsive center-block" src="myPic.jpg" />
</div>
解决方案的JSFiddle演示
添加center-block类将覆盖使用img-responsive类放入的display:block指令。如果没有img-responsive类，图像将仅通过添加文本中心类居中
此外，您应该了解flexbox的基础知识以及如何使用它，因为Bootstrap 4现在本机使用它。
这是布拉德·希夫制作的一个优秀的、快节奏的视频教程
这里有一个很棒的小抄
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 align-items-center"> <button type="submit" class="btn btn-primary">创建</button> < / 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>
我喜欢类似问题的答案:
在实际的表data <td>和表头<th>元素上使用bootstrap的文本中心类。所以 <td class="text-center">单元格数据</td> and <th class="text-center">头单元格数据</th>
在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 align-items-center"> <button type="submit" class="btn btn-primary">创建</button> < / div >
来源:Bootstrap 4.1
