css - 如何在图片列表中垂直居中放置图片？

我的项目中的文章/教程列表有问题。

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

最佳答案

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

是什么使它垂直居中。

position: relative;上的.tutorial是使img垂直居中对齐的原因。否则，它将在屏幕上垂直居中。

关于css - 如何在图片列表中垂直居中放置图片？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41656404/