Bootstrap文本垂直居中对齐

Question

我想使文本垂直居中于100vh高度。 这是我所做的

 .about-header { height: 100vh; background: #000; } .about-header p { font-size: 5em; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div class="container-fluid about-header text-center"> <div class="row "> <div class="col-md-12"> <p>Lorem Ipsum</p> </div> </div> </div> 

Answer 1

只需将其添加到CSS之下：

.about-header{
    height: 100vh;
    background: #000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
   -webkit-box-align: center;
      -ms-flex-align: center;
         align-items: center;
}

您的内容将垂直对齐。