css的居中佈局問題

css常常用來處理居中問題，不一樣的狀況使用不一樣的方法；

一 :水平居中

• (1)文本、圖片等行內元素的水平居中

  給父元素設置text-align:center,能夠實現文本、圖片等行內元素的水平居中

<style>
  .wrapper{width:500px; height:100px; text-align:center}
</style>
<div class="wrapper">
    hello world!
</div>
<div class="wrapper">
    <img src="test.png">
</div>

• (2)肯定寬度的塊級元素
  肯定寬度的塊級元素水平居中是經過設置margin-left:auto和margin-right:auto來實現。

<style>
  .wrapper{width:500px; height:100px;background:#ccc;}
  .inner{width:200px;height:50px;margin-left:auto;margin-right:auto;background:#f00;}
</style>
<div class="wrapper">
    <div class="inner">hello world!</div>
</div>

• (3)不肯定寬度的塊級元素的水平居中，有三種方式能夠實現，以分頁模塊爲例，由於分頁的數量不肯定，因此不能經過設置寬度來限制它的彈性。

  • 方法一

<style>
    ul {list-style:none;margin:0;padding:0;}
    table {margin-left:auto;margin-right:auto;}
    .test li{float:left;display:inline;}
    .test a{float:left;width:20px;height:20px;text-algin:center;line-height:20px;}
    .test a:hover{background:#fff;color:#313ac5;}
</style>

<div class="wrapper">
    <table>
        <tbody><tr><td>
            <ul class="test">
                <li><a href="#">1</a></li>
            </ul>
        </td></tr></tbody>
    </table>
    <table>
        <tbody><tr><td>
            <ul class="test">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
            </ul>
        </td></tr></tbody>
    </table>
    <table>
        <tbody><tr><td>
            <ul class="test">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
            </ul>
        </td></tr></tbody>
    </table>
</div>

該方法演示了分頁有一個頁碼，三個頁碼，五個頁碼。寬度值不能肯定。
這裏使用了一個table標籤來幫助實現不肯定寬度的塊級元素的水平居中，table自己並非塊級元素，若是不給它設定寬度，它的寬度有內部元素的寬度撐起，即便不設定它的寬度，僅設定margin-left:auto和margin-right:auto就能夠實現水平居中，將ul包含在table標籤中，對table設置margin-left:auto和margin-right:auto，就間接的是ul實現水平居中。

• 方法二

<style>
    ul{list-style:none;margin:0;padding:0;}
    .wrapper{background:#000;width:500px;height:100px;}
    .test{text-align:center;padding:5px;}
    .test li{display:inline}
    .test a{padding:2px 6px; background:#333;color:#00f;border:2px solid #f00;text-decoration:none; }
    .test a:hover{background:#fff;color:#234567;}
</style>
<div class="wrapper">
    <ul class="test"><li><a href="#">1</a></li></ul>
    <ul class="test">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
    <ul class="test">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ul>
</div>

該方法改變了塊級元素li的顯示方法，display爲inline，而後使用text-align:center來實現居中。此方法優勢是不用增長過多的語義標籤。缺點是塊級元素設置成行內元素後，缺乏了一些特性，不能設置寬度。

• 方法三

<style>
    ul{list-style:none;margin:0;padding:0;}
    .wrapper{background:#000;width:500px;height:100px;}
    .test{clear:both; padding-top:5px;float:left;position:relative;left:50%;}
    .test li{float:left;display:inline;margin-left:5px;positive:relative;left:-50%;}
    .test a{float:left;width:20px;height:20px;text-align:center;line-height:20px;background:#333;color:#00f;border:2px solid #f00;text-decoration:none; }
    .test a:hover{background:#fff;color:#234567;}
</style>
<div class="wrapper">
    <ul class="test"><li><a href="#">1</a></li></ul>
    <ul class="test">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
    <ul class="test">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ul>
</div>

該方法經過給父元素設置position:relative和left:50%,子元素設置position:relative和left:-50%來設置水平居中。這個方法能夠保留塊級元素有的display:block屬性，且不會添加語義標籤。缺點是設置了position:relative，增長了一些反作用。

垂直居中

• 1 父元素高度不肯定的文本、圖片、塊級元素的垂直居中

<style>
    .wrapper{background:#000;width:500px;color:#fff;padding-bottom:10px;
    padding-top:10px;}
    .test{width:200px;height:50px;background:#f00;}
</style>
<div class="wrapper">hello world</div>
<div class="wrapper"><img src="test.jpg" /></div>
<div class="wrapper"><div class="test"></div></div>

父元素高度不肯定的文本、圖片、塊級元素的垂直居中經過給父容器設置相同的上下內邊距來實現。

• 2 父元素高度肯定的單行文本的垂直居中

<style>
    .wrapper{background:#000;width:500px;height:100px;line-height:100px;color:#fff;}
</style>
<div class="wrapper">hello world</div>

父元素高度肯定的單行文本的垂直居中，經過給父元素設置line-height來實現的，line-height的值和父元素的高度值相同

• 3 父元素高度肯定的多行文本、圖片、塊級元素的垂直居中

• 方法一

利用css的一個垂直居中屬性vertical-align，可是只有當父元素爲td或th時，這個vertical-align纔會生效，對於其餘的塊級元素（div、p）默認狀況下是不支持該屬性。在Firefox和IE8下，能夠設置塊級元素的display:table-cell屬性，激活vertical-align。在IE6和IE7下不支持table-cell屬性，設置table-cell方法沒法解決瀏覽器兼容問題。總之，直接使用表格減小些操做。缺點是增長了嵌套深度和語義標籤。

<style>
    .wrapper{background:#000;width:500px;color:#fff;height:100px;}
    .test{width:200px;height:50px;background:red;}
</style>
<table>
    <tbody><tr><td class="wrapper">
        hello<br>
        hello<br>
        hello<br>
        hello
    </td></tr></tbody>
</table>
<table>
    <tbody><tr><td class="wrapper">
        <img src="img.jpg">
    </td></tr></tbody>
</table>
<table>
    <tbody><tr><td class="wrapper">
        <div class="test"></div>
    </td></tr></tbody>
</table>

• 方法二

對於支持display:table-cell的IE8和Firefox用display:table-cell和vertical-align：middle。對於不支持的IE6和IE7使用特定的hack。利用hack技術區別對待Firefox、IE八、IE7和IE6，在不支持display:table-cell的IE六、IE7下，經過給父子兩層元素分別設置top:50%和top:-50%來實現居中。

<style>
    .mb10{margin-bottom:10px;}
    .wrapper{background:#f00;width:500px;color:#fff;margin-bottom:10px;height:10px;
    display:table-cell;vertical-align:middle;*position:relative;}
    .test{width:200px;height:50px;background:#f00;}
    .verticalWrapper{*position:absolute;*top:50%;}
    .vertical{*position:relative;*top:-50%;}
</style>
<div class="mb10">
    <div class="wrapper">
        <div class="verticalWrapper">
            <div class="vertical">
            hello world!<br>
            hello world!<br>
            hello world!
            </div>
        </div>
    </div>
</div>
<div class="mb10">
    <div class="wrapper">
        <div class="verticalWrapper">
            <img src="img.jpg" class="vertical">
        </div>
    </div>
</div><div class="mb10">
    <div class="wrapper">
        <div class="verticalWrapper">
            <div class="test vertical"></div>
        </div>
    </div>
</div>

內容選自《編寫高質量代碼-web前端開發修煉之道》