更少的Bootstrap 3-如何將容器水平和垂直居中

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