コンテナの中央にコンテンツを配置する方法ブートストラップ

Question

カードを縦方向と横方向にコンテナの中央に配置したいが、テキストアライメントまたは垂直アライメントを使用しても動作しないように見える。

.container-fluid { 
 
    text-align: center; 
 
} 
 

 
.card { 
 
    border: 1px solid #000; 
 
    width: 60%; 
 
    padding: 20px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
     <div class="card"> 
 
      <div class="card-block"> 
 
       <p class="card-text"> 
 
        "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..." 
 
       </p> 
 
      </div> 
 
     </div> 
 
    </div>

Answer 1

ありがたいことに、フレキシボックスは、コンテンツを中心に、それが容易になります！必要に応じて、コンテナの高さと幅を調整できます。テストのためにwidth: 100%;とheight: 500px;を使用しました。以下のコードを試してみてください。

.container-fluid { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    height: 500px; 
 
    width: 100%; 
 
} 
 

 
.card { 
 
    text-align: center; 
 
    border: 1px solid #000; 
 
    width: 60%; 
 
    padding: 20px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
     <div class="card"> 
 
      <div class="card-block"> 
 
       <p class="card-text"> 
 
        "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..." 
 
       </p> 
 
      </div> 
 
     </div> 
 
    </div>