293

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

4

12 回答 12

254

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

class="mx-auto"

至于其他用户的建议，还有本地引导类可用，例如：

class="text-center"
class="pagination-centered"
于 2013-02-01T09:09:01.993 回答
76

从引导文档：

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

<div class="center-block">...</div>
于 2014-04-22T21:47:55.943 回答
55

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

JSFiddle Demo 问题

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

添加center-block类会覆盖display:block使用类放入的指令img-responsive。没有img-responsive类，图像将通过添加text-center类来居中

此外，您应该了解flexbox的基础知识以及如何使用它，因为Bootstrap 4 现在原生使用它。

这是Brad Schiff提供的出色的快节奏视频教程

这是一个很棒的备忘单

于 2016-01-01T22:17:04.343 回答
35

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

Bootstrap 4中的水平中心

  • text-center仍然用于display:inline元素
  • mx-auto取代center-block中心display:flex儿童
  • offset-* 或 mx-auto可用于居中网格列

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

演示Bootstrap 4 水平居中

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

于 2017-03-20T14:10:59.490 回答
30

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

.content {
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
  }
<div class = "content" >
  
   <p> some text </p>
  </div>

于 2016-03-22T11:19:30.567 回答
8

我用这个

<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>
于 2013-06-19T21:16:38.210 回答
7

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

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

 <div class="span8 centering"></div>
于 2013-04-06T16:52:57.353 回答
7

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

来源：引导 4.1

于 2018-07-12T13:14:49.873 回答
4

我喜欢类似问题的解决方案：

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

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

于 2015-06-18T12:56:20.133 回答
2

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>

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

于 2019-08-19T10:20:21.203 回答
1

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

中心水平确实是text-center类

center vertical但是使用引导类会添加两者mb-auto mt-auto，以便将边距顶部和边距底部设置为自动。

于 2018-11-19T15:19:51.960 回答
0

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

d-flex用于弹性规则

用于项目垂直方向的flex-column

align-items-center用于水平居中

justify-content-center用于垂直居中

样式='高度：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>

于 2019-05-29T10:48:22.320 回答