Twitter Bootstrap - 如何水平或垂直居中元素

Posted 2023-03-05

技术标签:

【中文标题】Twitter Bootstrap - 如何水平或垂直居中元素【英文标题】：How can I center elements horizontally or vertically with Twitter Bootstrap? 【发布时间】：2012-04-22 17:46:48 【问题描述】：

有没有办法让 html 元素在主父元素中垂直或水平居中？

【问题讨论】：

这是一篇关于水平和垂直居中的好文章：See Here This answer below 是通过 v4+ 中的 Bootstrap 类实现此目的的本机方式 【参考方案1】：

更新：虽然这个答案在 2013 年初很可能是正确的，但不应再使用它。正确的解决方案uses offsets，像这样：

class="mx-auto"

至于其他用户的建议，也有可用的原生引导类，例如：

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

【讨论】：

使用text-center 进行布局是非常糟糕的做法。在 Bootstrap 中对齐列的正确方法是使用 col-XX-offset-Y 类。 getbootstrap.com/css/#grid-offsetting。这个答案在 2013 年可能是正确的，但今天不应该再使用了。【参考方案2】：

来自Bootstrap documentation：

将元素设置为display: block 并通过margin 居中。可作为 mixin 和 class 使用。

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

【讨论】：

【参考方案3】：

如果您试图在 div 中将图像居中，但图像不会居中，这可能描述了您的问题：

JSFiddle Demo of the problem

<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>

JSFiddle demo of solution

添加center-block 类会覆盖使用img-responsive 类放入的display:block 指令。如果没有 img-responsive 类，只需添加 text-center 类，图像就会居中

此外，您应该了解flexbox 的基础知识以及如何使用它，因为Bootstrap 4 now uses it natively。

这是一个出色的快节奏video tutorial by Brad Schiff

这是一个很棒的cheat sheet

【讨论】：

【参考方案4】：

在 Bootstrap 4 中，centering 方法发生了变化。

Bootstrap 4 中的水平中心

text-center 仍用于 display:inline 元素 mx-auto 将 center-block 替换为居中 display:flex 孩子 offset-* 或 mx-auto 可用于使网格列居中

mx-auto（自动 x 轴边距）将居中 display:block 或 display:flex 具有定义宽度的元素、（%、vw、px 等..)。 默认使用弹性盒在网格列上，因此弹性盒居中方法也多种多样。

Demo Bootstrap 4 Horizontal Centering

BS4 中的垂直居中见 https://***.com/a/41464397

【讨论】：

【参考方案5】：

您可以像这样直接写入您的 CSS 文件：

.content 
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);

<div class = "content" >
  
   <p> some text </p>
  </div>

【讨论】：

这似乎忽略了这是一个 Bootstrap 问题的事实，因此感兴趣的用户几乎肯定会有其他 Bootstrap 特定的类导致它不起作用。【参考方案6】：

我用这个

<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>

【讨论】：

在某些情况下不起作用（请参阅comment on essentially the same answer 并且不使用Bootstrap-specific classes for centering。【参考方案7】：

对于水平居中，你可以有这样的东西：

.centering
float:none;
margin:0 auto


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

【讨论】：

在图像中直接使用时不起作用（至少在当前实现中不起作用）：<img src="img/logo.png" style="float:none; margin:0 auto" />。将img 与父级div 包围起来，并为父级提供.text-center 或.pagination-centered 课程就像一种魅力。要以margin:0自动居中元素，您需要为该元素添加宽度。在上面的示例中，没有指定宽度，因为 span8 在 boobstrap 中具有宽度，但您的图像没有这样将在父级内水平居中该图像这忽略了问题的“引导”部分。【参考方案8】：

借助 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>

来源：Bootstrap 4.1

【讨论】：

【参考方案9】：

我喜欢this solution from a similar question：

在实际表数据<td> 和表头<th> 元素上使用引导程序的text-center 类。所以

<td class="text-center">Cell data</td> 和 <th class="text-center">Header cell data</th>

【讨论】：

【参考方案10】：

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>

这些类将使您的内容水平和垂直居中。

【讨论】：

这重复了一年前 alvseek 的答案。【参考方案11】：

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

center Horizontal确实是text-center类

center vertical 但是使用引导类会同时添加 mb-auto mt-auto 以便将 margin-top 和 margin bottom 设置为 auto。

【讨论】：

text-center 为我工作。我试图在md-12 div 中居中一个按钮这似乎只是重复现有的答案。【参考方案12】：

对于bootstrap4几个项目的垂直中心

d-flex 用于弹性规则

flex-column 表示项目的垂直方向

align-items-center 用于水平居中

justify-content-center 用于垂直居中

style='height: 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>

【讨论】：

这重复了 alvseek 近一年前的现有答案。编辑新版本引导程序的答案并添加“运行代码 sn-p”。我的回答更正确。 @TylerH 运行代码 sn-p 区别是类d-column

以上是关于Twitter Bootstrap - 如何水平或垂直居中元素的主要内容，如果未能解决你的问题，请参考以下文章

Twitter Bootstrap 3 水平滚动问题

使用响应式 Twitter Bootstrap 内容重叠水平表单的问题

如何在 webapp 或 yo angular 上更新和包含 Twitter Bootstrap 3？

在twitter bootstrap中居中对齐一列[重复]

Twitter Bootstrap 单选框/复选框 - 如何放置 glyphicon

Twitter Bootstrap 模态表单：如何拖放？