logo标签列表

如何使用Bootstrap使一个div在垂直和水平方向上居中？

csstwitter-bootstrap
22

我有一个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>

I have a CSS like this:

.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不够熟悉，所以需要你的帮助。谢谢！:)

9个回答
37

Bootstrap 4：

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

JsFiddle


（翻译：）
1
这也适用于Bootstrap 5。这是我能找到的唯一有效的方法!!! - Moe Singh
对我不起作用 :( - Ax M
应该可以。请检查jsfiddle。把你的代码发到另一个fiddle里，让我检查一下。 - speti43
15

这个问题的其他答案有些使用表格和自定义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>

以下是每个类的详细说明：

  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 的高度正确，以便进行垂直对齐。
13

我发现有些答案很难实现。不过，这个问题似乎是最基本的之一，因此在这里提供一个答案，供像我这样的人参考。

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

9

看这个，很酷吧

这是一个CodePen链接，可以看到它的效果

html、body的宽度和高度都为100%；

如果你想要在视窗中心对齐，容器需要使用相对或固定定位，并且宽度和高度都为100%。如果只是想在元素内部居中，大小并不重要。

居中的元素需要使用绝对定位，top和left都为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%;
  }
}
9

我做的有效方法如下：

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

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

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

它在大约200像素乘以200像素的窗口下完美工作。

请查看Code Pen 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 -->
2
2

兄弟们看这个，它有效...

（注：未提供上下文，具体翻译可能会略有不同）
<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>
1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接