【问题标题】：How to center vertically and horizontally a div using Bootstrap? [duplicate]如何使用 Bootstrap 将 div 垂直和水平居中？ [复制]
【发布时间】：2015-01-12 12:29:27
【问题描述】：

我的 CSS 有问题。我的索引页面中有一个面板表单，我想在页面中间垂直和水平移动它。但我不知道如何为此创建 CSS。

这是我的示例代码：

<div class="login_header"></div>

<div class="container" style="text-align: center;">
    <div class="col-md-6 col-md-offset-3">
        <div class="panel_form panel panel-default">
            <div class="panel-content">
                <h1>test</h1>
            </div>
            <div class="panel-footer">
                <p>test</p>
            </div>
        </div>
    </div>
</div>

<footer class="footer"></footer>

我有一个这样的 CSS：

.login_header { min-height: 50px; background-color: #f5f5f5; }

.panel_form {
   /* I don't have an idea with this */
}

.footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%;
    height: 50px;
    background-color: #f5f5f5;
}

我的 CSS 不够好，所以我需要你的帮助。多谢了.. :)

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

引导程序 4：

<div class=" h-100 d-flex justify-content-center align-items-center">
  <div>
      Items are Centered horizontally and vertically
  </div>
</div>

JsFiddle

【讨论】：

这也适用于引导程序 5。我找到的唯一一个有效的!!!

【解决方案2】：

此问题的其他一些答案使用带有表格和自定义 CSS 类的 CSS hack。正如发帖者询问“如何使用 Bootstrap 垂直和水平居中”，这里是如何仅使用 Bootstrap 4 实用程序类来做到这一点：

<div class="d-flex justify-content-md-center align-items-center vh-100">
    <p>Your Content</p>
</div>

需要注意的是，由于父 div 的样式，当在同一个 div 中添加其他元素时，它们将出现在第一个元素的旁边，而不是它的下方。要解决此问题，只需在父级中添加一个额外的 div 即可重置样式。

<div class="d-flex justify-content-md-center align-items-center vh-100">
    <div>
        <p>Content 1</p>
        <p>Content 2</p>
    </div>
</div>

这确实适用于 Bootstrap flex，我发现放置在这样的 flex 组件中时效果最好，而不是包裹整行。

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="d-flex justify-content-md-center align-items-center vh-100">
                 <p>Content 1</p>
            </div>
        </div>
        <div class="col-md-6">
            <div class="d-flex justify-content-md-center align-items-center vh-100">
                 <p>Content 2</p>
            </div>
        </div>
    </div>
</div>

以下是每个类别的细分：

d-flex：实际上是display: flex，允许div根据内容的数量增长或缩小。
justify-content-md-center：在页面中心对齐内容，也可以替换为justify-content-sm-center或justify-content-lg-center来更改断点。
align-items-center: 将 div 中所有项目的对齐方式居中。
vh-100：将 div 的高度设置为100vh，或 100“垂直高度”。这可确保 div 具有正确的高度以允许垂直对齐。

【讨论】：

【解决方案3】：

我发现有些答案很难实现。但是，这个问题似乎是最基本的问题之一，所以这里有一个像我这样的人可能会觉得有用的答案。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container" style="display: flex; justify-content: center; align-items: center; height: 100vh">
    hello world!
</div>

【讨论】：

【解决方案4】：

所以，看看这个；这很酷

HERES A CODE PEN TO SEE IT IN ACTION

html，body 100%宽高；

具有 100% 宽度和高度的相对或固定定位的容器，如果您想在视口中居中。如果您只想在元素内居中，大小无关紧要。

居中的东西需要绝对定位，上左50%，然后用transform: translate(-50%, -50%);

不管它的大小，它在视口中居中

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
}
#outer {
  position: relative;
  width: 100%;
  height: 100%;
  background: #BADA55;
}
#outer #container {
  background-color: #f3f3f3;
  color: #663399;
  padding: 15px 25px;
  width: 100%;
  max-width: 300px;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}

LESS 版本

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  width: 100%;
  height: 100%;
}
#outer {
  position: relative;
  width: 100%;
  height: 100%;
  background: #BADA55;

  #container {
    background-color: #f3f3f3;
    color: #663399;
    padding: 15px 25px;
    width: 100%;
    max-width: 300px;    
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;top: 50%;
  }
}

【讨论】：

【解决方案5】：

对我有用的是：

 <div class="container h-100">
  <div class="d-flex justify-content-md-center align-items-center vh-100">
   <p>Your Content</p>
  </div>     
 </div>

【讨论】：

【解决方案6】：

在这里提问和回答：Twitter Bootstrap - how to center elements horizontally or vertically

但它的短处是：

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

Bootstrap 文档链接：http://getbootstrap.com/css/#helper-classes-center

【讨论】：

【解决方案7】：

兄弟们检查一下它的工作原理......

<head>
<title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

**<div class="container" style="display: flex; justify-content: center; align-items: center; height: 100vh">
<div class="jumbotron">
 hello world!
</div>**

</div


</body>
</html>

【讨论】：

【解决方案8】：

给外层div 显示：表格；和内部 div 显示：表格单元格然后你可以使用垂直对齐：居中在内部 div 上

进一步阅读：Twitter Bootstrap - how to center elements horizontally or vertically

【讨论】：

【解决方案9】：

虽然我还没有找到解决纯 Bootstrap 5 中一般问题的解决方案，但这里有一个解决方案，只需要一点额外的 CSS。请通过更改浏览器窗口大小或使用浏览器的响应模式进行测试，但不能同时使用这两种模式，因为它们不能很好地结合使用。

此示例将 50% 宽和高的 div 居中，并将其中的文本居中。

它在 200 x 200 像素的窗口中完美运行。

查看代码笔 https://codepen.io/david263/pen/eYvOGOB 并使用设置 > 全屏模式。

<style type="text/css">
/* Required for proper centering */
html, body{
    height:100vh;
    width:100vw;
}
</style>

<!-- Outer container, full page width and height, red border -->
<div class="container-fluid d-flex justify-content-center align-items-center" style="height:100vh; overflow:hidden; border: 2px solid red">

<!-- Inner row, half the width and height, centered, blue border -->
<div class="row text-center d-flex align-items-center" style="overflow:hidden; width:50vw; height:50vh; border: 1px solid blue">

<!-- Innermost text, wraps automatically, automatically centered -->
<h2>Center This Text (Even if Wrapped) in all Viewport Sizes</h2>

</div> <!-- Inner row -->
</div> <!-- Outer container -->

【讨论】：