css 一行文字时垂直居中

问题描述

问 题

如何让它一行文字的时候垂直居中

    <style type="text/css">
        .ellipsis-2 {
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            word-wrap: break-word;
            white-space: normal !important;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            color: #fff;
        }
    </style>
    <div style="padding: 0 10px;height: 50px;background-color: #7092BE;width: 200px;">
        <p class="ellipsis-2">
            一行文字时垂直居中，两行文字时换行
        </p>
    </div>

解决方案

在div上面使用flex

    height: 200px;
    width: 200px;
    background-color: red;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
    word-break: break-all;

这篇关于css 一行文字时垂直居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！