css - 如何将内容对齐到容器 Bootstrap 的中间

Question

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

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