Bootstrap fluid container vertical center

Question

I'm struggling to center a DIV within a fluid-container (Bootstrap), and you may help me to resolve the issue.

I'd like to get the following result ; a full width block vertically centered on the page : Image vertically centered block

I seeked for an answer through several topics, and managed to get it work ... until I use the "fluid" Bootstrap class in order to get fullwidth elements.

EDIT : I tried to use Flexbox, but the block is stucked on the top of the page : 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>

Do you have any idea of what I'm doing wrong ?

Thank you very much !

Answer 1

100% height not enoug for it

try to add min-height : {somemeasure}px to your css an change displaying table-cell to block

or you could try to use flexbox approach for your block:

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