如何使用Bootstrap垂直和水平居中div？

Question

我的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不够好,这就是为什么我需要你的帮助.就这些,多谢.. :)

Answer 1

引导程序 4：

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

提琴手

Answer 2

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

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

Answer 3

这个问题的其他一些答案使用带有表格和自定义 CSS 类的 CSS hacks。正如海报所问“如何使用 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>

以下是每个班级的细分：

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

Answer 4

所以,看看这个; 它太酷了

这是一个代码笔,可以看到它的行动

html,身体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%;
  }
}

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

Answer 6

给外层div显示：table；和内部div显示：table-cell 然后你可以在内部div上使用vertical-align: center

进一步阅读：Twitter Bootstrap - 如何水平或垂直居中元素