html - 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>