Question

有没有办法在主要父母的内部垂直或水平居中html元素？

Answer 1

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

至于其他用户建议，还有一些本机引导类可用，如：

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

感谢@Henning和@trejder

Answer 2

来自Bootstrap documentation：

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

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

Answer 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 of the solution

添加center-block类会覆盖使用display:block类放入的img-responsive指令。

如果没有img-responsive类，只需添加text-center类

，图像就会居中

更新

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

这是一个优秀，快节奏的video tutorial by Brad Schiff

这是一个很棒的cheat sheet

Answer 4

2018年更新

在 Bootstrap 4 中，居中方法已更改..

BS4中的水平中心

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

mx-auto（自动x轴边距）会将display:block或display:flex元素置于定义的宽度，（%，{ {1}}，vw等。）。默认情况下在网格列上使用Flexbox ，因此还有各种flexbox居中方法。

Demo Bootstrap 4 Horizontal Centering

对于BS4中的垂直居中，请参阅 https://stackoverflow.com/a/41464397/171456

Answer 5

您可以直接写入您的css文件：

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

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

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

Answer 7

对于水平居中，你可以这样：

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

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

Answer 8

我喜欢这个类似问题的解决方案。 https://stackoverflow.com/a/25036303/2364401对实际表格数据text-center和表格标题<td>元素使用bootstraps <th>类。所以

<td class="text-center">Cell data</td>

和

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

Answer 9

使用bootstrap 4，您可以使用flex

<div class="d-flex justify-content-center align-items-center">
    <button type="submit" class="btn btn-primary">Create</button>
</div>

来源：bootstrap 4.1

Answer 10

bootstrap 4 + Flex解决此问题

您可以使用

<div class="d-flex justify-content-center align-items-center">
    <button type="submit" class="btn btn-primary">Create</button>
</div>

它应该在水平和垂直方向上居中

Answer 11

我在Bootstrap 4中发现可以执行以下操作：

中心水平的确是text-center类

中心垂直，但是使用引导程序类会同时添加mb-auto mt-auto，以便将margin-top和margin bottom设置为auto。

Answer 12

针对bootstrap4少数几个项目的垂直中心

d-flex （用于弹性规则）

柔性柱用于项目的垂直方向

对齐内容中心以居中

style ='height：300px;'必须具有用于计算中心或使用 h-100 类

的设置点

<div class="d-flex flex-column 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>

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

12 个答案:

更新