CSS layout-multiline text is centered vertically

Scene: The parent element is highly fixed and how the text in it is centered vertically.

Method One:

Code:

    <style>
        *{padding:0;margin:0;font-size:12px;}
        DIV{FLOAT:LEFT;WIDTH:200PX;HEIGHT:200PX;MARGIN:10PX;BORDER:1PX solid blue; line-height:200px;}
        span{display:inline-block;vertical-align:middle;line-height:22px;}
    </style>

    <div>
        <span> Test text Test text </span>
    </div>
    <div>
        <span> Test Text <br/> Test text <br/> Test text <br/> Test text <br/> Test text <br/> Test text </span>
    </div>

Result diagram:

Key styles:

The ① parent element (here is the DIV) setting and the highly consistent line-height (here is 200px)---defined by the subsequent vertical-align, this is to set the DIV's baseline

② child element (here is span) set the appropriate line-height, and set Display:inline-block, Vertical-align:middle; elements that---inline levels cannot be set line-height. So here to set the Inline-block.

Re-examine the definition of CSS vertical-align properties:

This property defines the vertical alignment of the baseline of the element within the row relative to the baseline of the row where the element is located. Allows you to specify a negative length value and a percent value. This causes the element to be lowered rather than raised. In a table cell, this property sets the alignment of the cell contents in the Cell box.

Be aware of the above:

The ①vertical-align property should be set to inline elements (inline block elements are also available)

② if the total height of the text exceeds the height of the container (here is the DIV), the vertical center is invalidated.

③IE7 the following span end tags and internal content cannot have space gaps, meaning that the end tag and internal content of the span are joined together.

Method Two:

Use Display:table-cell.

    <style>
        *{padding:0;margin:0;font-size:12px;}
        div{display:table-cell;width:200px;border:1px solid blue;vertical-align:middle;}
    </style>

    <div>
        <span> Test text Test text </span>
    </div>
    <div>
        Test text Test text
    </div>
    <div>
        <span> Test text <br/> Test text <br/> Test text <br/> Test text <br/> Test Text <br/> Test text </span>
    </div>

Result screenshot:

Advantages: High layout, no need to set the height, text easy to achieve vertical center

Disadvantage: IE7 is incompatible below.