Bootstrap 3 with Less -我如何设法使容器水平和垂直居中

Question

我正在尝试用bootstrap 3框架和less工具来构建一个网页。对于一个特殊的页面，我想将容器水平和垂直居中。我知道有些问题已经存在，但对我来说它们不起作用。下面是我尝试过的解决方案：

HTML：

   <div class="container hvcenter" > <!-- Container -->
     <div class="row"> <!-- Bootstrap Row -->
       <div class="col-sm-4">
         <img src="img/logo.png" alt="logo" class="img-responsive">
       </div>
       <div class="col-sm-offset-1 col-sm-7">
         <p>Textblock ... </p>
       </div>
     </div>
   </div>

CSS：

.container {
    max-width: 85%;
    padding-top: 3em;
    padding-bottom: 3em;
    background-color: silver;
    border-radius: @border-radius-large * 6;
}

.hvcenter {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

这会使div水平居中，而不是垂直居中。

另一种尝试是构建一个用于垂直对齐的mor类，并使用用于水平对齐的内置解决方案(..center block)：

HTML：

   <div class="container center-block vcenter" > <!-- Container -->
     <div class="row"> <!-- Bootstrap Row -->
       <div class="col-sm-4">
         <img src="img/logo.png" alt="logo" class="img-responsive">
       </div>
       <div class="col-sm-offset-1 col-sm-7">
         <p>Textblock ... </p>
       </div>
     </div>
   </div>

CSS：

.container {
    max-width: 85%;
    padding-top: 3em;
    padding-bottom: 3em;
    background-color: silver;
    border-radius: @border-radius-large * 6;
}

.vcenter {
    display: inline-block;
    vertical-alignment: middle;
    float: none;
}

我对每一个答案都很满意。感谢您在这方面花费时间。

Answer 1

​

        .container {
    max-width: 85%;
    padding-top: 0;
    background-color: silver;
    border-radius: @border-radius-large * 6;
}

.vcenter {
    display: flex;
    align-items: center;
    height:10em;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<div class="container center-block" > <!-- Container -->
     <div class="row"> <!-- Bootstrap Row -->
       <div class="col-xs-4">
         <img src="img/logo.png" alt="logo" class="img-responsive">
       </div>
       <div class="col-xs-offset-1 col-xs-7 vcenter">
         <p>Textblock ... </p>
       </div>
     </div>
   </div>

​

Answer 2

你应该试试flex。请查看此链接：https://jsbin.com/pezesaquza/edit?html,css,output

​

​