CSS 水平垂直居中

 

直接進入主題:

/*  水平垂直居中 1
    div{
        width:150px;
        height: 100px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        border:1px solid #000;
    }
    img {
        width: 50px;
        height: 50px;
    }
    */

    /*  水平垂直居中 2
    div{
        width:150px;
        height: 100px;
        position: relative;
        border:1px solid #000;
    }
    img {
        position: absolute;
        width: 50px;
        height: 50px;
        top: 50%;
        left: 50%;
        margin-top: -25px;
        margin-left: -25px;
    }
    */

 /*  水平垂直居中 3

<table width='100%' height='100%' border='0' cellpadding='0' cellspacing='0'>
        <tbody>
            <tr>
                <td align='center' valign='middle'>

                      <div>..<p>..<span>

                      裏面的所有元素都會垂直水平居中.

                      不需要的元素需要重新設置對齊方式

                </td>
            </tr>
        </tbody>
    </table>

*/