CSS設置水平居中和垂直居中

1.行內元素設置水平居中
通過設置父元素

text-align:center

2.定寬塊狀元素設置水平居中
通過設置“左右margin”值爲“auto”來實現居中的。

width:500px;/*定寬*/
margin:0px auto;/* margin-left 與 margin-right 設置爲 auto */

3.不定寬塊狀元素設置水平居中
(1)爲需要設置的居中的元素外面加入一個 table 標籤；這個table的CSS樣式設置爲“左右 margin”的值爲auto

<tbody><tr><td>
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</td></tr></tbody>

table{
    margin:0 auto;
}

(2)改變塊級元素的 dispaly 爲 inline 類型，然後使用 text-align:center 來實現居中效果

<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>

.container{
    text-align:center;
}
.container ul{
    list-style:none;
    display:inline;
}
.container li{
    margin-right:8px;
    display:inline;
}

(3)通過給父元素設置 float，然後給父元素設置 position:relative 和 left:50%; 子元素設置 position:relative 和 left:-50% 來實現水平居中。

<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>

.container{
    position:relative;
    left:50%
}

.container ul{
    list-style:none;
    position:relative;
    left:-50%;
}
.container li{
    float:left;
    display:inline;
    margin-right:8px;
}    

4.父元素高度確定的單行文本垂直居中
通過設置父元素的 height 和 line-height 高度一致來實現

<div class="container">
    hi,imooc!
</div>

.container{
    height:100px;
    line-height:100px;
}

5.父元素高度確定的多行文本垂直居中

(1)使用插入 table (包括tbody、tr、td)標籤，同時設置 vertical-align：middle

<table><tbody><tr><td class="wrap">
    <div>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
    </div>
</td></tr></tbody></table>

    td 標籤默認情況下就默認設置了 vertical-align 爲 middle

(2)設置塊級元素的 display 爲 table-cell，設置 vertical-align 屬性

<div class="container">
    <div>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
    </div>
</div>

.container{
    display:table-cell;/*IE8以上及Chrome、Firefox*/
    vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}

以上技巧和代碼整理致 imooc

http://www.imooc.com/learn/9