如何將內容與容器中間對齊引導程序

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

值得慶幸的是，Flexbox，就可以很容易地中心內容！您可以根據需要調整容器的高度和寬度。我只用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>