132

将div放置在响应页面的中心

我需要使用引导程序通过将div定位在页面中心来创建一个响应页面，如下面提到的布局一样。

css twitter-bootstrap responsive-design

— 拉玛·普里亚（Rama Priya）
source

stackoverflow.com/questions/9554724/...

— 肯尼汤普森

我需要中心与文本一个div（自适应设计使用自举），其应该存在另一个全宽COL-LG-12中心的div像在layout.it将是有益的，如果我能在小提琴得到样品内代码

— Rama Priya

173

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的简单示例。

— 波波洛诺
source

41

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

— L105

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

— Rama Priya

1

我为您找到了解决方案，请检查此小提琴jsfiddle.net/Palapas/52VtD/687 容器的高度必须为100％，否则您需要使用绝对位置

— ppollono 2013年

45

CSS：

html,
body {
    height: 100%;
}

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

HTML：

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

小提琴的例子

— vocasle
source

1

当我在移动设备上打开网站时，此解决方案不起作用。

— codeinprogress

2

嗨，您使用的是哪种浏览器？您加载了Bootstrap的样式表和javascript吗？它可以在Firefox和Chrome中运行。在所有屏幕尺寸上均经过测试。

— vocasle

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

— 洛基·凯夫

1

此修复程序打破了引导程序的默认样式

— ppollono

21

在bootstrap 4中

到水平居中儿童的，使用自举-4类

justify-content-center

到垂直居中儿童的，使用自举-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实用程序

11

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

Bootstrap 4的垂直中心

— 齐姆
source

5

您无需更改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>

— 周杰伦
source

4

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

<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

— 马托埃
source

2

很好的答案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>

这样就足够了。

— Simranjazz
source

2

不是最好的方法，但是仍然可以

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

— 塔伦·拉瓦特（Tarun Rawat）
source

1

我认为用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 ，但不是背景色。

— 唯一的我
source

1

对于实际版本的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

1

试试这个，例如，我使用固定的高度。我认为这不会影响响应方案。

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

展开摘要

— Sanka Sanjeeva
source

1

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

参考这里

— 勇敢的
source

-1

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

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

— 斯拉万
source

你能扩大答案吗？随着时间的流逝，链接趋于陈旧。

— orique 2015年

2

同样，这不是实现此目的的“引导方式”。

— FuriousFolder 2016年

-1

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

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

— Yuvraj Patil
source

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

— rbsthlm
source

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

jsFiddle