使用 Jade 和 Bootstrap 在页面中间居中图像

Question

我刚开始使用 Jade 和 Bootstrap，但 运行 遇到了麻烦。我正在尝试将图像居中放置在我的 index.jade 中间。我能够让它水平居中，但不能垂直居中。下面是我的 index.jade 和它目前的样子。

index.jade

extends layout

block content
a.container
a.row
img.center-block(src= "images/logo.png")

当前截图

Answer 1

您可以使用自定义 class，如下所示：

.center {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

并且：

<div class="row">
    <div class="col-xs-12 center">
        <div>Center</div>
    </div>
</div>

Answer 2

这样做：

 position: relative;
 top: 50%;
 transform: translateY(-50%);

对于要垂直居中的元素。