CSS系列之讓元素居中

首先咱們須要知道元素都有哪些種類？

1. 內嵌元素（display:inline;）如a，span，b，i 【一個不可定製的盒子】

   [默認同行能夠繼續跟同類型標籤]
   [內容撐開寬度]
   [不支持寬高]
   [不支持上下的margin和padding]
   [代碼換行會被解析成空]

2. 塊元素（display:block;）如div，p，h1-h6

   [默認獨佔一行顯示]
   [基本支持全部的css命令]

3. 行內塊（display:inline-block;）如img 【img就是這麼一個神奇的東東。它既不是內嵌又不是塊，而是行內塊】

   [塊在一行顯示]
   [支持寬高]
   [沒有寬度時內容撐開寬度]

那麼接下來咱們依次將上面三種元素居中

1、內嵌元素之單行文本

最最多見的解決辦法就是使用text-align和line-height

line-height:200px;
text-align:center;

可是這種處理辦法就必定十全十美嗎？我不這麼認爲（估計有人吐槽我強迫症了）
反正我每次選中文字看到非文字區也被選中就很不爽，不過IE6-8只會選中文字

2、塊元素居中

解決辦法：使用定位元素+margin負值

width:100px;
height:100px;
position:relative;
left:100px;
top:100px;
margin-left:-50px;
margin-top:-50px;

缺點：要求必須知道盒子的寬高

3、行內塊居中

（1）把img轉化爲背景圖片，而後用background-position:center;可是須要注意的是因爲圖片的連接通常都是常常改變的，因此須要這樣作：

<img style=」background-img:url(imgURL)」 />

是否是違背了內容樣式分離的原則。

（2）輔助標籤

html代碼：

<div class="box">
    <img src="img.png" /><span></span>
</div>

CSS代碼：

.box{width:200px;height:200px;border:1px solid #333;margin:0 auto;text-align:center;}
.box img{vertical-align:middle;border:1px solid #999;padding:2px;}
.box span{display:inline-block;height:100%;background:#333;vertical-align:middle;}

效果：

廢話：要讓img元素和輔助元素span在一行，不然會出現水平不徹底居中，當使用inline-block時，換行會被解析成空格。其實網上還有其餘辦法，好比說風靡已久的table法。網上一大堆這裏就不顯擺了。