是否有任何方法在主父元素中垂直或水平地居中html元素?
当前回答
我喜欢类似问题的答案:
在实际的表data <td>和表头<th>元素上使用bootstrap的文本中心类。所以 <td class="text-center">单元格数据</td> and <th class="text-center">头单元格数据</th>
其他回答
为bootstrap4垂直中心的少数项目
D-flex用于伸缩规则
用于项目垂直方向的弯曲列
Align-items-center用于水平定心
垂直居中的justification -content-center
Style ='height: 300px;'必须为设定点，其中中心为calc或使用h-100类
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/> < span class=" font - family -宋体-宋体-宋体-宋体-宋体-宋体-宋体-宋体-宋体-宋体-宋体-宋体-宋体" style=" 身高:300 px; " > <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 >
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 >
这些类将使您的内容水平和垂直居中。
Bootstrap文档:
设置要显示的元素:块和居中通过边距。可作为mixin和类使用。
<div class="center-block">...</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。
