如何将第一行垂直对齐设置为居中

Question

我在行部分使用align-items-center类但它不起作用：

<div class="container">
    <div class="row align-items-center">
        <div class="col-12 bg-warning">
            hello
        </div>
    </div>
</div>

我希望该行在页面上垂直居中，如图所示：

Answer 1

你的代码工作正常，但你必须设置一个height。目前，.container和.row采取了内容的高度。所以你必须将height设置为.row，你的.col应该是垂直居中的：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row align-items-center" style="height:500px;">
        <div class="col-12 bg-warning">
            hello
        </div>
    </div>
</div>

要在站点的可见区域设置垂直中心，可以使用height:100vh;而不是固定大小。

Answer 2

您需要使页面占据100％的高度。

html, body, .container, .row {
  height: 100%;
}

Answer 3

试试这个：https://jsfiddle.net/q1ypnzg8/2/

<div class="container divouter">
    <div class="row align-items-center divmiddle">
        <div class="col-12 bg-warning divinner">
            hello
        </div>
    </div>
</div>

CSS

.divouter {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.divmiddle {
    display: table-cell;
    vertical-align: middle;
}

.divinner {
    margin-left: auto;
    margin-right: auto; 
    text-align: center;
}

Answer 4

在将文本放在中心时，CSS有局限性。为了兼容浏览器，我建议您使用内联对齐属性。

<div align="center">Content goes here.</div>

CSS可以使用的其他属性包括：

#divID{ margin:auto text-align: center;

}

虽然，我更喜欢margin auto属性，因为文本对齐可能在某些浏览器中对某些标签失败。

Answer 5

您可以为.row.align-items-center添加此css

.row.align-items-center {
    position: absolute;
    transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

希望这会有所帮助。