Bootstrap文本垂直对齐中心

Question

我想在100vh高度上垂直居中。 这就是我所做的

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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;
}

您的内容将垂直对齐。