如何将内容与容器Bootstrap的中间对齐

Question

我想将卡对齐到容器的中间（垂直和水平），但使用text-align或vertical-align似乎不起作用。

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

值得庆幸的是，flexbox可以轻松集中内容！您可以根据需要调整容器的高度和宽度。我刚刚使用encode()和width: 100%;进行测试。请尝试以下代码：

＆＃13;

＆＃13;

height: 500px;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;