Vertical Alignment my items?CSS+BOOTSTRAP - html

Question

I have this site:
http://avocat2.dac-proiect.ro/?page_id=17
This is code HTML:
<div class="container-fluid">
<p class="text-center" style="color:white">Hello World!</p>
<p class="text-center" style="color:white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequa</p>
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4" style="">
<p><img src="wp-content/themes/WordPressBootstrap-master/images/b1.jpg" class="img-responsive center-block" alt="Cinque Terre">
</p></div>
<div class="col-sm-4 col-md-4 col-lg-4" style="">
<img src="wp-content/themes/WordPressBootstrap-master/images/b2.jpg" class="img-responsive center-block" alt="Cinque Terre">
</div>
<div class="col-sm-4 col-md-4 col-lg-4" style="">
<img src="wp-content/themes/WordPressBootstrap-master/images/b3.jpg" class="img-responsive center-block" alt="Cinque Terre">
</div>
<p></p></div>
</div>
I want this item to be aligned vertically at the center, for all resolutions.
Currently the resolution looks like:
http://i61.tinypic.com/2wh4e4g.jpg
This is code CSS:
.entry-content2
{
background:url("http://avocat2.dac-proiect.ro/wp-content/themes/WordPressBootstrap-master/images/BODY-DROP.png");
width:100%;
height: 100vh;
}
How can I solve this problem?
I tried several options but unfortunately looks different in several resolutions.
Thanks in advance!

Answer 1

Let's use flex box for this!
.container-fluid{
height: 100vh;
display:flex;
align-items:center;
justify-content:center;
}
Here I used the viewport vertical unit to make the container be the frame size.
Then I make the display to be flex, and some flex-ish centering.
But, do not forget to add a div inside .container-fluid, like this:
<div class="container-fluid">
<div class="hola">
...(rest of content)
</div>
</div>
Call it whatever you like and style however you want that div, as you'd avoid a centering mess due to flex box only affecting the father div.