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


当前回答

Bootstrap文档:

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

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

其他回答

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

class="mx-auto"

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

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

对于水平居中,你可以这样做:

.centering{
float:none;
margin:0 auto
}

 <div class="span8 centering"></div>

在Bootstrap 4中,定心方法已经改变。

水平中心在引导4

文本中心仍然用于显示:内联元素 Mx-auto将中心块替换为中心显示:flex子 Offset -*或mx-auto可用于网格列居中

Mx-auto (auto x轴边距)将中心显示:块或显示:具有定义宽度的flex元素(%,vw, px等)。默认情况下,在网格列上使用Flexbox,因此也有各种Flexbox居中方法。

示范引导4水平定心

有关BS4的垂直定心,请参阅https://stackoverflow.com/a/41464397

你可以像这样直接写入你的CSS文件:

.content { 位置:绝对的; 上图:50%; 左:50%; 变换:翻译(-50%,-50%); } <div class = "content" > <p>一些文本</p> < / div >

在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