在引导响应页面中，如何使div居中
在引导响应页面中，如何使div居中
提问于 2013-11-22 18:30:37
我需要使用bootstrap创建一个响应式页面，在页面中心放置一个div，就像下面提到的布局一样。
回答 12
Stack Overflow用户
回答已采纳
发布于 2013-11-23 01:16:23
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在所有屏幕大小居中的简单示例。
Stack Overflow用户
发布于 2019-08-02 08:09:12
你不需要在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>
Stack Overflow用户
发布于 2016-11-17 22:16:14
如果没有display table和bootstrap，我宁愿这样做
<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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20142606
复制相关文章
相似问题