Question

我正在努力将DIV置于流体容器（Bootstrap）中心，你可以帮我解决这个问题。

我想得到以下结果;在页面上垂直居中的全宽度块：Image vertically centered block

我通过几个主题寻求答案，并设法让它工作......直到我使用＆＃34;流体＆＃34; Bootstrap类以获取全宽元素。

编辑：我尝试使用Flexbox，但该块已停留在页面顶部：enter image description here

html, 
body {
    min-height: 100%;
}
.container-block {
display: flex;
align-items: center;
justify-content: center;
color: #FFF; 
}

.block {
height: 100px;
width: 100%;
background: #313131;
}

HTML：

<div class="fluid-container">
  <div class="fluid-container container-block">
    <div class="col-lg-12 text-center block">AAA</div>

</div>

你知道我做错了什么吗？

非常感谢！

Answer 1

100％的高度不适合它

尝试将min-height : {somemeasure}px添加到您的css，更改显示要阻止的表格单元格

或者您可以尝试对您的块使用flexbox方法：

.someselector {
  display         : flex;
  justify-content : center;
  align-items     : center;
}

Answer 2

这不是一个真正的引导问题，可以通过纯CSS和绝对定位来实现：

html, 
body {
height: 100%;
margin: 0;
}
.full-page {
height: 100%;
width: 100%;
background: #f1f1f1;
posistion: relative;

}
.central-block {
height: 100px;
width: 100%;
background: #323836;
color: #FFF;
margin-top: auto;
margin-bottom: auto;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;

}

JS Fiddle

Answer 3

按照Lim Kayas的建议使用Flexbox结束。谢谢！

Bootstrap液容器垂直中心

3 个答案: