今天來總結一下使用css來使元素居中的方法，首先說說使元素居中的基本思路
1、水平居中：margin-left=margin-right;
2、豎直居中：margin-top=margin-bottom
塊元素居中
1、div水平居中
很自然，這個div通過設置左右外邊距auto的方式實現了居中
2、div豎直居中
為了使效果更加明顯，使用兩個div來嵌套，這里要豎直居中的是子元素——“son”
實現的效果
1、設置父元素的height=line-height；
2、設置子元素的display為inline-block
3、設置子元素的vertical-align為middle
這樣就完美地使div豎直居中了
這時候我忽然想讓他水平居中和豎直居中一起實現，我加上margin：0 auto；
最后效果
發現這招怎么不管用了，水平居中并沒有實現，這是出了什么問題呢？
別忘了此時他是一個inline-block，既具有block的寬度高度特性又具有inline的同行特性。
既然如此，父元素的寬度為200px，子元素的寬度為100px，經過復雜的計算。。。。
設置margin-left：50px就可以了
行內元素居中
水平居中
豎直居中
添加上lineheight：200px；
用a元素試試，同樣一步到位，沒毛病
用鏈接代替span
s,i,b等標簽同理
如果將內容替換為圖片呢
htnl部分
css部分
效果并不是特別好，豎直居中出了問題
什么鬼？我只是想居個中而已呀？
思考
img可以設置width和height，是一個行內塊元
加上塊元素的設置居中方法
把display：inline-block和vertical-align：middle補上
感動~~~居中再次奏效
忽然想到之前做過的一些注冊界面，如果每一行都這么做是不是會很簡單呢？
html代碼
css內容
界面
目前只是為了調試居中的效果，并沒有寫過多的樣式，但是居中的效果還是可以的
定位居中
直接上代碼
沒有任何的定位設置
熊本在左上方，寬度是div的三分之一
添加相對定位
完成居中
當然改為絕對定位也是可以的，但是要先在css中去掉標簽自帶的margin和padding，否則定位回受到影響
去除自帶樣式的內外邊距
background-image也想要居中？
多大點事~
Q：如果是一個行內元素添加背景呢？
A：設置display屬性為inline—block不就可以了
按照原來的代碼來
呃呃。。。不想玩了
既然不能通過text-align來設置水平居中，那就只能向margin低頭了
添加margin：50px;
完美
最后做個小結：
