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

您的内容将垂直对齐。