CSS

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

所以，看看这个;它很酷

HERES A CODE PEN TO SEE IT IN ACTION

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 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的高度正确以允许垂直对齐。

Answer 3

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

但缺点是：

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

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

Answer 4

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

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

给外部div 显示：表; 和内在的div 显示：table-cell 然后你可以使用 vertical-align：center 在内部div

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

Answer 6

兄弟们正在检查这一功能是否正常...

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

Answer 7

对我有用的是：

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

引导程序4：

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

JsFiddle

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

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

9 个答案:

所以，看看这个;它很酷

CSS

LESS版本