css - How to center single-line and multi-line text

Question

as the picture shows,

When there is only one line in this line, the text is vertically centered. When there are two lines of text, the text is also vertically centered. How to do it?

PS: No need to use flex.

Answer 1

Look at the renderings first

Then the code implementation

<style>
    .message-box{
        width: 500px;
        height: 500px;
        background: #333;
    }
    .message-item{
        background: #666;
        padding: 20px;
        width: 100%;
        height: 100px;
        display: table;
        box-sizing: border-box;
    }
    .item-title{
        width: 60%;
        margin: 0;
        display: table-cell;
        vertical-align: middle;
    }
    .item-time{
        width: 40%;
        margin: 0;
        display: table-cell;
        vertical-align: middle;
        text-align: right;
    }
</style>
<p class="message-box">
    <p class="message-item">
        <p class="item-title">课程下单成功</p>
        <p class="item-time">2017-02-01 10:30</p>
    </p>
    <p class="message-item">
        <p class="item-title">您报名的活动即将开始【作品集日-一起来看展】</p>
        <p class="item-time">2017-02-01 10:30</p>
    </p>
</p>

Answer 2

Judging from your layout, it should look like this: the text on the left and the time on the right are both vertically centered.
A simple method is:
layout:<p><span>gfghghg</span><span>2017-12<s/pan></p>
css:
p{display: table ;}
span{display: table-cell; vertical-align: middle;}

You can try it

Answer 3

Contains various solutions and portals

Answer 4

    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;

Answer 5

<p class="" style="display: table;height: 100px;">

    <p class="" style="display: table-cell;vertical-align: middle;">
        sadfsadf
    </p>
    <p class="" style="display: table-cell;vertical-align: middle;">
        sadfsadf
    </p>
</p>

Answer 6

<p class="one">
    <p class="two>
        文字
    </p>
</p>

.one {
    position: relative;
    }
.two {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

Answer 7

According to the picture you provided, each piece of content has a fixed height, so set the line-height of the outermost parent element equal to the p tag display in its own height: inline-block; vertical-align: middle;
Code structure

<ul>
    <li>
        <p></p><span></span>
    </li>
    <li>
        <p></p><span></span>
    </li>
    <li>
        <p></p><span></span>
    </li>
</ul>

Answer 8

You can take a look at these methods I summarized. Portal
What the subject needs is a method to vertically center multi-line text. The article I summarized contains typical methods to achieve this. Examples are as follows.
http://codepen.io/zengkan0703...
I wonder if it was the questioner who disliked my answer? If so, I hope I can be answered why. If not, the above example should solve your needs.