在引导响应页面如何中心一个div
我需要使用bootstrap来创build一个响应式页面，方法是在页面的中心位置放置一个div，就像下面提到的布局一样。
更新Bootstrap 4
更简单的垂直网格与柔性盒alignment
@import url('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>
CSS：
html, body { height: 100%; } .container { height: 100%; display: flex; justify-content: center; align-items: center; }
HTML：
<div class="container"> <div> example </div> </div>
示例小提琴
Bootstrap更新4
现在Bootstrap 4是flexbox，垂直alignment更容易。 鉴于一个完整的高度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
没有显示表和无引导，我宁愿这样做
<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; }
好的回答ppollono。 我只是在玩耍，我有一个更好的解决scheme。 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>
这就够了。
我认为用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>
注意：我添加了第12列的div，对于md，sm和xs，如果不这样做，第一个带背景色的div（在本例中为“blueviolet”）将会崩溃，您将能够看到子div ，但不是背景颜色。
这里是简单的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/
的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; }
