垂直对齐我的项目?CSS+引导程序

Question

我有这个网站：

http://avocat2.dac-proiect.ro/?page_id=17

这是代码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>

对于所有分辨率，我希望此项目在中心垂直对齐。

目前的分辨率看起来像：

http://i61.tinypic.com/2wh4e4g.jpg

这是代码CSS:

.entry-content2
{
  background:url("http://avocat2.dac-proiect.ro/wp-content/themes/WordPressBootstrap-master/images/BODY-DROP.png");
width:100%;
  height: 100vh;
}

我该如何解决这个问题？我尝试了几种选择，但不幸的是，在几种解决方案中看起来有所不同。

提前感谢！

Answer 1

让我们使用flex box！

.container-fluid{
  height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

在这里，我使用了视口垂直单位，使容器成为框架大小。然后，我使显示器是灵活的，并有一些灵活的中心。

但是，不要忘记在.容器流体中添加一个div，如下所示：

<div class="container-fluid">
<div class="hola">
...(rest of content)
</div>
</div>

可以随心所欲地调用它，也可以随心所欲地使用div，因为您可以避免由于flex box只影响父div而导致的居中混乱。