一.水平居中
    行內(nèi)元素和塊級元素不同,對于行內(nèi)元素,只需在父元素中設(shè)置text-align=center即可;
    對于塊級元素有以下幾種居中方式:
    1.將元素放置在table中,再將table的margin-left和margin-right設(shè)置成auto,將table居中,使在其之中的塊級元素葉居中,但是這種方式不符合語義化標簽的規(guī)范;
    2.將塊級元素轉(zhuǎn)換行內(nèi)元素(通過設(shè)置display:inline)后再居中.這種方式使居中元素變成行內(nèi)元素而致使無法設(shè)置寬高;
    3.設(shè)置父元素float:left,position:relative,left:50%;子元素float:left,position:relative,left:-50%,利用相對布局的方式居中.上面三種方式各有優(yōu)劣,依使用情景具體選擇.
    二.垂直居中
    1.對于知道高度的元素可以設(shè)置上下padding相等;
    2.設(shè)置line-height和height相等
    3.利用vertical-align,但是這屬性只在tr,td中適用,故可將元素放置入table中在居中
    源碼
    代碼如下:
    <!-- 水平居中 -->
    <!-- 行內(nèi)元素居中只需在父元素中設(shè)置text-align即可 -->
    <div>
    <p>
    hehe</p>
    </div>
    <!-- table居中 -->
    <table>
    <tr>
    <td>
    <ul>
    <li><a href="#">呵</a></li>
    </ul>
    </td>
    </tr>
    </table>
    <table>
    <tr>
    <td>
    <ul>
    <li><a href="#">呵</a></li>
    <li><a href="#">呵</a></li>
    <li><a href="#">呵</a></li>
    </ul>
    </td>
    </tr>
    </table>
    <table>
    <tr>
    <td>
    <ul>
    <li><a href="#">呵</a></li>
    <li><a href="#">呵</a></li>
    <li><a href="#">呵</a></li>
    <li><a href="#">呵</a></li>
    <li><a href="#">呵</a></li>
    </ul>
    </td>
    </tr>
    </table>
    <!-- 將塊級元素變?yōu)樾袃?nèi)元素在居中 -->
    <ul>
    <li>nihao </li>
    </ul>
    <!-- 利用相對佈局 -->
    <ul>
    <li>你好 </li>
    </ul>
    <!-- 豎直居中-->
    <!-- 1.設(shè)置相同的上下padding -->
    <!-- 2.父元素height和line-height相同 -->
    <hr />
    <div style={background:#000;width:500px;color:#fff;line-height:100px;text-align:center}>
    我要來場說走就走的旅行
    </div>
    <!--3. vartical-align,這屬性只對tr,td起作用 -->
    <table>
    <tr verticla-align="center" height="100" background="#FF00FF">
    <td>一弦一柱思華年</td>
    </tr>
    </table>
    css樣式
    代碼如下:
    <style type="text/css">
    .father
    {
    width:500px;
    }
    .inlineCenter
    {
    text-align:center;
    float:left;
    }
    .blockCenter
    {
    width:100px;
    margin-left:auto;
    margin-right:auto;
    text-align:"center"
    }
    .tableclass
    {
    margin-left:auto;
    margin-right:auto;
    }
    .ulclass
    {
    list-style:none;
    margin:0;
    padding:0;
    }
    .ulclass li
    {
    float:left;
    display:inline;
    text-align:center;
    }
    .ulclass li a
    {
    text-align:center;
    float:left;
    background:#316AC5;
    color:#fff;
    }
    .ulclass li a:hover
    {
    background:#fff;
    color:#316AC5;
    }
    .relativeCenterFather
    {
    float:left;
    position:relative;
    left:50%
    }
    .relativeCenterChild
    {
    float:left;
    position:relative;
    left:-50%;
    }
    /* 豎直居中*/
    .wrap
    {
    background:#000;
    width:500px;
    color:#fff;
    height:100px;
    line-height:100px;
    }
    </style>
    以上就是本文所述的全部內(nèi)容了，希望對大家熟練掌握CSS能夠有所幫助。