在引导响应页面中如何使 div 居中

Posted 2023-03-06

【中文标题】在引导响应页面中如何使 div 居中

【英文标题】：In a bootstrap responsive page how to center a div

【发布时间】：2013-12-07 04:48:18

【问题描述】：

我需要使用引导程序创建一个响应式页面，方法是将 div 放置在页面的中心，如下面提到的布局所示。

【问题讨论】：

***.com/questions/9554724/…

我需要使用文本（使用引导的响应式设计）将 div 居中，该文本应该出现在另一个全宽 col-lg-12 居中的 div 中，就像布局中一样。如果我这样做会很有帮助可以在fiddle中获取示例代码

【参考方案1】：

Bootstrap 4 更新

使用 flex-box 实现更简单的垂直网格对齐

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css');
html,
body 
  height: 100%

<div class="h-100 row align-items-center">
  <div class="col" style="background:red">
    TEXT
  </div>
</div>

Bootstrap 3 解决方案

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 html, body, .container-table 
    height: 100%;

.container-table 
    display: table;

.vertical-center-row 
    display: table-cell;
    vertical-align: middle;

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>

<div class="container container-table">
    <div class="row vertical-center-row">
        <div class="text-center col-md-4 col-md-offset-4" style="background:red">TEXT</div>
    </div>
</div>

这是一个以所有屏幕尺寸居中的水平和垂直 div 的简单示例。

【讨论】：

也许class="col-xs-4 col-xs-offset-4" 就够了。

我必须在所有屏幕尺寸中将 div col-lg-12 垂直居中放置

我为你找到了解决方案检查这个小提琴jsfiddle.net/Palapas/52VtD/687容器必须有高度 100% 否则你需要使用绝对位置

【参考方案2】：

jsFiddle

HTML：

<div class="container" id="parent">
  <div class="row">
    <div class="col-lg-12">text
      <div class="row ">
        <div class="col-md-4 col-md-offset-4" id="child">TEXT</div>
      </div>
    </div>
  </div>
</div>

CSS：

#parent     
    text-align: center;

#child 
    margin: 0 auto;
    display: inline-block;
    background: red;
    color: white;

【参考方案3】：

很好的答案 ppollono。我只是在玩，我得到了一个更好的解决方案。 CSS 将保持不变，即：

html, body, .container 
    height: 100%;

.container 
    display: table;
    vertical-align: middle;

.vertical-center-row 
    display: table-cell;
    vertical-align: middle;

但对于 HTML：

<div class="container">
    <div class="vertical-center-row">
        <div align="center">TEXT</div>
    </div>
</div>

这就够了。

【参考方案4】：

这是将任何 div 置于中心的简单 CSS 规则

.centered 
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

【讨论】：

你能扩展你的答案吗？随着时间的推移，链接往往会变得陈旧。

另外，这不是实现这一目标的“引导方式”。

【参考方案5】：

没有显示表和没有引导程序，我宁愿这样做

<div class="container container-table">
    <div class="row vertical-center-row">
        <div class="text-center col-md-4 col-md-offset-4" style="background:red">TEXT</div>
    </div>
</div>


 html, body, .container-table 
    height: 100%;

.container-table 
    width:100vw;
  height:150px;
  border:1px solid black;

.vertical-center-row 
   margin:auto;
  width:30%;
  padding:63px;
  text-align:center;

http://codepen.io/matoeil/pen/PbbWgQ

【参考方案6】：

CSS：

html,
body 
    height: 100%;


.container 
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

HTML：

<div class="container">
  <div>
    example
  </div>
</div>

Example fiddle

【讨论】：

当我在手机中打开我的网站时，此解决方案不起作用。

您好，您使用的是什么浏览器？您是否加载了 Bootstrap 的样式表和 javascript？它适用于 Firefox 和 Chrome。在所有屏幕尺寸上进行了测试。

我通过调整浏览器大小以及使用响应式网站检查器对此进行了测试。为我工作。

这个修复破坏了引导程序的默认样式

【参考方案7】：

我认为用 bootstrap 完成布局的最简单方法是这样的：

<section>
<div class="container">
    <div class="row">
        <div align="center">
            <div style="max-width: 200px; background-color: blueviolet;">
                <div>
                    <h1 style="color: white;">Content goes here</h1>
                </div>
            </div>
        </div>
    </div>
</div>

我所做的只是添加允许我将 div 居中的 div 层，但由于我没有使用百分比，因此您需要将 div 的最大宽度指定为居中。

您可以使用相同的方法将多个列居中，您只需要添加更多的 div 层：

<div class="container">
    <div class="row">
        <div align="center">
            <div style="max-width: 400px; background-color: blueviolet;">
                <div class="col-md-12 col-sm-12 col-xs-12" style="background-color: blueviolet;">
                    <div class="col-md-8 col-sm-8 col-xs-12" style="background-color: darkcyan;">
                        <h1 style="color: white;">Some content</h1>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-12" style="background-color: blue;">
                        <p style="color: white;">More content</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

注意：我为 md、sm 和 xs 添加了第 12 列的 div，如果您不这样做，第一个带有背景颜色的 div（在本例中为“blueviolet”）将折叠，您将能够看到子 div，但不是背景颜色。

【参考方案8】：

Bootstrap 4 更新

现在 Bootstrap 4 是 flexbox，垂直对齐更容易。给定一个全高的 flexbox div，只需我们 my-auto 即可获得均匀的顶部和底部边距...

<div class="container h-100 d-flex justify-content-center">
    <div class="jumbotron my-auto">
      <h1 class="display-3">Hello, world!</h1>
    </div>
</div>

http://codeply.com/go/ayraB3tjSd/bootstrap-4-vertical-center

---

Vertical center in Bootstrap 4

【参考方案9】：

在 引导程序 4

要将子级水平居中，请使用 bootstrap-4 类

justify-content-center

要垂直居中子级，请使用 bootstrap-4 类

 align-items-center

但请记住不要忘记将 d-flex 类与这些一起使用 它是一个 bootstrap-4 实用程序类，就像这样

<div class="d-flex justify-content-center align-items-center" style="height:100px;">
    <div class="bg-primary">MIDDLE</div>    
</div>

注意：如果此代码不起作用，请确保添加 bootstrap-4 实用程序

【参考方案10】：

对于实际版本的 Bootstrap 4.3.1 使用

风格

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style type="text/css">
html, body 
    height: 100%;

</style>

代码

<div class="h-100 d-flex justify-content-center">
<div class="jumbotron my-auto">
<!-- example content -->
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Title</h4>
<p>Desc</p>
</div>
<!-- ./example content -->
</div>
</div

【参考方案11】：

你不需要在CSS中改变任何东西，你可以在课堂上直接写，你就会得到结果。

<div class="col-lg-4 col-md-4 col-sm-4 container justify-content-center">
  <div class="col" style="background:red">
    TEXT
  </div>
</div>

【讨论】：

它只适用于水平中心，我不知道为什么会这样？ queston 要求（h 和 v）。

【参考方案12】：

不是最好的方法，但仍然有效

<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-lg-12"></div>
<div class="col-lg-12">
<div class="row h-100">
  <div class="col-lg-4"></div>
  <div class="col-lg-4 border">
    This div is in middle
  </div>
  <div class="col-lg-4"></div>
</div>

</div>
<div class="col-lg-12"></div>
</div>

</div>

【参考方案13】：

最简单的解决方案是在两侧添加一个空白列，如下所示：

  <div class="row form-group">

    <div class="col-3"></div>

    <ul class="list-group col-6">
      <li class="list-group-item active">Yuvraj Patil</li>
    </ul>

    <div class="col-3"></div>
  </div>

【参考方案14】：

试试这个，例如，我使用了固定高度。我认为这不会影响响应式场景。

<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <div class="d-flex justify-content-center align-items-center bg-secondary w-100" style="height: 300px;">
        <div class="bg-primary" style="width: 200px; height: 50px;"></div>
    </div>
</body>
</html>

【参考方案15】：

在 Bootstrap 4 中，使用：

<div class="d-flex justify-content-center">...</div>

您还可以根据需要更改位置：

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

参考here

【参考方案16】：

body
    height: 100vh;
 
.container
    height: 100%;

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container text-center d-flex align-items-center justify-content-center">
        <div>
            <div>
                <h1>Counter</h1>
            </div>
            <div>
                <span>0</span>
            </div>
            <div>
                <button class="btn btn-outline-primary">Decrease</button>
                <button class="btn btn-danger">Reset</button>
                <button class="btn btn-outline-success">Increase</button>
            </div>
        </div>
    </div>

你也可以这样做。

【参考方案17】：

为了使 div 居中，将 bootstrap 的三个类名分配到一个 div 中：ml-0 mr-0 mx-auto

看看下面这个简单的例子是如何居中的

<div class="bg-primary w-50 ml-0 mr-0 mx-auto text-center">
      Center
</div>