css - Bootstrap 流体容器垂直中心

Question

我正在努力将 DIV 置于流体容器 (Bootstrap) 的中心，您可以帮助我解决这个问题。

我想得到以下结果；页面垂直居中的全宽 block :Image vertically centered block

我通过几个主题寻找答案，并设法让它工作......直到我使用“流体”Bootstrap 类以获得全 Angular 元素。

编辑:我尝试使用 Flexbox，但该 block 卡在页面顶部: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 更改显示要阻止的表格单元格

或者您可以尝试为您的 block 使用 flexbox 方法:

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