引導程序4垂直對齊

Question

我正在嘗試將內容垂直和水平居中。我有一些問題與垂直部：Working Plunker

我的自定義CSS卡：

.customCard { 
 
    width: 15rem; 
 
    height: 7rem; 
 
    background-color: blue; 
 
    color:#eee; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="card-deck"> 
 
    <div class="card-block "> 
 
    <div class="card customCard mt-2 customCursorPointer"> 
 
     <div class="card-body"> 
 
     <div class="container d-flex r h-100"> 
 
     <div class="row justify-content-center mx-auto align-items-center"> 
 
      <h4 class="card-title">AAAA</h4> 
 
     </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

您需要在.card-body

.customCard { 
 
    width: 15rem; 
 
    height: 7rem; 
 
    background-color: blue; 
 
    color:#eee; 
 
} 
 
.card-body { 
 
    height: 100%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="card-deck"> 
 
    <div class="card-block "> 
 
    <div class="card customCard mt-2 customCursorPointer"> 
 
     <div class="card-body"> 
 
     <div class="container d-flex r h-100"> 
 
     <div class="row justify-content-center mx-auto align-items-center"> 
 
      <h4 class="card-title">AAAA</h4> 
 
     </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

添加 height:100%