關於CSS中的置中問題的思考及解決方案

根據CSS中區塊層級元素和行內元素的不同特徵，其置中顯示的方式也有差異，下面就水平和豎直置中的情況做一總結：

1.水平置中
    1.1 給父元素設定text-aglin:center；可以實現文本、圖片等行內元素的水平置中。
    1.2 確定寬度的區塊層級元素的水平置中是通過設定margin-left和margin-right的值為auto來實現。
    1.3 對於寬度值不確定的區塊層級元素的置中可以使用以下三種方式，可根據實際情況選擇不同方案：
        1.3.1 改變區塊層級元素的display值為inline,然後使用text-aglin:center來實現置中，
              但此做法的缺點是將區塊層級元素轉化為行內元素後就無法設定長寬，當然還有行內元素的其他局限性。
        1.3.2 利用table。table本身不是區塊層級元素(display的常用值包含block,compact,inline,table,none,marker).
              其寬度靠其儲存格中的內部元素的寬度“撐起”，即使不設定寬度也可以利用margin-left/right:auto來實現置中。
              當然，使用table標籤將會明顯增加代碼中的無語義標籤。
        1.3.3 通過給父級元素設定float和position：relative以及left:-50%，給子項目設定position:relative和left:-50%，
              也可以實現水平置中，但是relative的位置屬性不好控制。
2.豎直置中
    2.1 父元素高度不確定的文本、圖片、區塊層級元素的豎直置中是通過設定父元素相同的上下邊距實現的。
    2.2 父元素高度確定的單行文本的豎直置中是給父元素設定line-height:(父元素的height值)來實現。
    2.3 父元素高度確定的多行文本、圖片、區塊層級元素的豎直置中，分三種情況處理：
        2.3.1 父元素為td和th時，可用vertical-align
        2.3.2 對於不是此類型的父元素在Firefox和IE8下可用display:table-cell來啟用成td或th類型
        2.3.3 如果以上兩種情況都不滿足，則需要給元素添加表格標籤，so sad~~~