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

这样做：

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

表示您想要垂直居中的元素。

Answer 2

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

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

并且：

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