css - 如何在文章列表中垂直居中图像？

Question

我的元素的文章/教程列表有问题。

Scenario (图像可以是其他尺寸，而不是 256x256，但必须是正方形，不能使用背景技巧，因为我在服务器上使用 Handlebars ，图像不需要使用 position: absolute)

Answer 1

.tutorial {
    background-color: #ccc;
    position: relative;
    img {
        position: absolute;
        display: inline-block;
        width: 50px;
        height: 50px;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto 0;
    }
...

top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto 0;

是什么让它垂直居中。

.tutorial 上的 position: relative; 使 img 垂直居中。否则它会在屏幕上垂直居中。