是否有任何方法在主父元素中垂直或水平地居中html元素?


当前回答

我发现在Bootstrap 4中你可以这样做:

中心水平确实是文本中心类

中心垂直,但是使用bootstrap类添加mb-auto mt-auto,使margin-top和margin- bottom设置为auto。

其他回答

我喜欢类似问题的答案:

在实际的表data <td>和表头<th>元素上使用bootstrap的文本中心类。所以 <td class="text-center">单元格数据</td> and <th class="text-center">头单元格数据</th>

Bootstrap文档:

设置要显示的元素:块和居中通过边距。可作为mixin和类使用。

<div class="center-block">...</div>

更新:虽然这个答案在2013年初可能是正确的,但现在不应该再用了。正确的解决方案使用偏移量,如下所示:

class="mx-auto"

至于其他用户的建议,也有本地引导类可用,如:

class="text-center"
class="pagination-centered"

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 4中你可以这样做:

中心水平确实是文本中心类

中心垂直,但是使用bootstrap类添加mb-auto mt-auto,使margin-top和margin- bottom设置为auto。