一行或多行文字始终垂直居中显示

效果图

image.png

image.png

image.png

1.html

<div class="shop">
            <img src="img/gou.png" />
            <div class="shopAdver">
                春节期间，回家过年，年后发货！春节期间，回家过年，年后发货！春节期间，回家过年，年后发货！
            </div>
        </div>

2.css

.shop{
    height: 50px;
    padding: 15px;
    position: relative;
}
.shop img{
    height: 50px;
    width: 50px;
}
.shopAdver{
    width: calc(100% - 90px);
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2; /*最多几行就写几*/
    -webkit-box-orient: vertical;
    display: -webkit-box;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 75px;
}