今天來(lái)總結(jié)一下使用css來(lái)使元素居中的方法顽频，首先說(shuō)說(shuō)使元素居中的基本思路
1藤肢、水平居中：margin-left=margin-right;
2、豎直居中：margin-top=margin-bottom
塊元素居中
1糯景、div水平居中
很自然嘁圈，這個(gè)div通過(guò)設(shè)置左右外邊距auto的方式實(shí)現(xiàn)了居中
2、div豎直居中
為了使效果更加明顯蟀淮，使用兩個(gè)div來(lái)嵌套最住，這里要豎直居中的是子元素——“son”
實(shí)現(xiàn)的效果
1、設(shè)置父元素的height=line-height怠惶；
2涨缚、設(shè)置子元素的display為inline-block
3、設(shè)置子元素的vertical-align為middle
這樣就完美地使div豎直居中了
這時(shí)候我忽然想讓他水平居中和豎直居中一起實(shí)現(xiàn)甚疟，我加上margin：0 auto仗岖；
發(fā)現(xiàn)這招怎么不管用了逃延，水平居中并沒(méi)有實(shí)現(xiàn)，這是出了什么問(wèn)題呢轧拄？
別忘了此時(shí)他是一個(gè)inline-block揽祥，既具有block的寬度高度特性又具有inline的同行特性。
既然如此檩电，父元素的寬度為200px拄丰，子元素的寬度為100px，經(jīng)過(guò)復(fù)雜的計(jì)算俐末。料按。。卓箫。
設(shè)置margin-left：50px就可以了
行內(nèi)元素居中
水平居中
豎直居中
添加上lineheight：200px载矿；
用a元素試試，同樣一步到位烹卒，沒(méi)毛病
s,i,b等標(biāo)簽同理
如果將內(nèi)容替換為圖片呢
效果并不是特別好闷盔，豎直居中出了問(wèn)題
什么鬼？我只是想居個(gè)中而已呀旅急？
img可以設(shè)置width和height逢勾，是一個(gè)行內(nèi)塊元
加上塊元素的設(shè)置居中方法
忽然想到之前做過(guò)的一些注冊(cè)界面，如果每一行都這么做是不是會(huì)很簡(jiǎn)單呢藐吮？
目前只是為了調(diào)試居中的效果溺拱，并沒(méi)有寫過(guò)多的樣式，但是居中的效果還是可以的
定位居中
直接上代碼
當(dāng)然改為絕對(duì)定位也是可以的迫摔，但是要先在css中去掉標(biāo)簽自帶的margin和padding，否則定位回受到影響
background-image也想要居中潦闲？
Q：如果是一個(gè)行內(nèi)元素添加背景呢攒菠？
A：設(shè)置display屬性為inline—block不就可以了
既然不能通過(guò)text-align來(lái)設(shè)置水平居中卓起，那就只能向margin低頭了
添加margin：50px;
最后做個(gè)小結(jié)：
