css 一行文字时垂直居中

Question

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

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

Answer 1

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

Answer 2

你这个表达的不明确，一般文字不会直接写在div，如果这样其实就是块级元素垂直居中的问题了；但是我看你好像又要表达行内元素垂直居中的问题。。

Answer 3

在div的样式里添加line-height:50px，保证这个值与你的固定高度一致。

Answer 4

.test{
  hight:20px;
  line-height:20px;
}

<div class="test">
  测试：块级元素内的单行文本垂直居中设置；第一，设置块级元素的高度height属性，第二，设置块级元素的line-height属性，其属性值和height属性值相同；
  注意，这里仅仅是设置单行文本！！！
</div>