Three ways to use vertical centering

Sometimes we need to center the contents of the element vertically, and here are three simple vertical centering methods I've learned

The first: Using the TD default Vertical-align:middle feature to achieve the vertical center effect of multiline text

Css:

　　

    . Wrap{        width: 200px;         Height: 200px;         Border: 1px solid red;    }

Html:

    <table class= "wrap" > <tr> <td> Center content needs to center content needs to center content needs to center content need center content need center content            < td>        </tr>    </table>

Effect:

　　

Second: single-line text setting with fixed height to container line-height equals container height to vertical center effect

Css:

    . Wrap{        width: 200px;         Height: 200px;         line-height: 200px;         Border: 1px solid red;    }

Html:

    <class= "wrap">         content        that needs to be centered </Div  >

Effect:

　　Note: This method is valid only for single-line text

The third type: Use the new Display:table-cell to achieve vertical centering effect

Css:

    . Wrap{        width: 200px;         Height: 200px;         display: Table-cell;         vertical-align:Middle;         Border: 1px solid red;    }

Html:

    <class= "wrap"         >        Center content needs to be centered content Content        that needs to be centered </div>

Effect:

　　

　　Note: IE6 and IE7 do not support this CSS property value

Three ways to use vertical centering