如何使Boostrap色譜柱垂直居中

Question

我想將此文本在容器內垂直和水平居中，在一行和一列中設置為12。但是我只能使其在水平而不是垂直居中。 我嘗試了Flex，但是它將頁面中的所有對象都移動到了中心，而我只想將其居中。

HTML：

 <div class="container-fluid home">

   <div class="row">
      <div class="col-md-12" id="text">
        <p>Hello World!</p>
      </div>

   </div>

CSS：

.home {
  height: 100%;
  background-image: url(images/home.png);
}

 #text {

   text-align:center;
 }

Answer 1

您可以使用以下代碼：

在擴展模式下查看代碼段結果

 .home { height: 150px; background-color:red; position:relative; } #text { position:absolute; top:50%; text-align:center; text-align:center; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid home"> <div class="row"> <div class="col-md-12" id="text"> <p>Hello World!</p> </div> </div> 

Answer 2

您可以使用CSS的transform屬性簡單地做到這一點。 但是您必須確保您的主容器具有定義的高度，例如：

.home{height: 1000px;
}

或其他任何內容，但在這種情況下100％的高度將無法工作，因為其父元素沒有定義任何高度。 之后，我們將包括css transform屬性，如下所示：

這是您的家庭班：

.home {
  height: 1000px;
  background: #ccc;
  float: left;
  width: 100%;
}

而且您必須像這樣更改您的html結構：

<div class="container-fluid home">
      <div class="col-md-12" id="text">
        <p>Hello World!</p>
      </div>
 </div>

之后，我們將為div定義一些css屬性，以使其在垂直和水平方向上居中。

#text{
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

現在，您可以輕松地使div垂直於父div或水平對齊。