? ? 作為學(xué)習(xí)前端的菜鳥顿天，寫實(shí)踐項(xiàng)目的時候總會出現(xiàn)各種bug。之前寫作業(yè)蔑担，做一個網(wǎng)站的頁面牌废，標(biāo)簽元素居中這樣的操作總會出錯，于是下定決心寫完作業(yè)后一定好好把這個問題解決啤握。于是就寫下了這篇小文章鸟缕，望路過的大神指出錯誤，歡迎大家留言討論排抬。有錯輕噴懂从，謝謝！
首先對標(biāo)簽進(jìn)行分類
block(塊級元素):
div p h1-h6 ul-li ol-li address table tr form
inline(行級元素):
span ? ?strong ? ?em ? ?del ? a ? b ? i
inline-block(行級塊元素):
img ? ?input ? select
margin:0 auto;處理居中問題
?對標(biāo)簽進(jìn)行樣式設(shè)置的時候蹲蒲，塊元素是最好操作的番甩，設(shè)置什么屬性，就會顯示出來届搁。所以如果不確定標(biāo)簽屬于哪一種類型缘薛，最好的在CSS樣式表里面加上一句display:block。那么你設(shè)置的所有樣式就會顯示出來了卡睦。
position居中定位
position定位有三個值可以填寫:absolute宴胧，relative，fixed.
absolute: 相對于離它最近的有定位的父級進(jìn)行定位表锻，若沒有則相對于瀏覽器窗口定位恕齐，并且會覆蓋在它后面的元素。
relative: 相對于它出生的位置進(jìn)行移動瞬逊，而且不會覆蓋它后面沒有absolute定位的元素显歧。
fixed: 只相對于瀏覽器窗口定位。
下面是用position定位的代碼截圖:
效果如下圖所示确镊，absolute和relative一樣士骤。
原理如下圖所示:先到1位置，再到2位置
不過若你同時把relative和margin:0 auto;打開代碼如下圖
效果又會不一樣骚腥，如下圖:圖中黃色區(qū)域的寬度和淡紫色div的寬度一樣敦间，都是300px。藍(lán)色的span首先定位left:50％束铭，top:50％廓块，然后margin:0 auto的覆蓋導(dǎo)致margin-left和margin-top失去作用。藍(lán)色的span依然相信自己還在div里契沫，執(zhí)行margin:0 auto;左右自動調(diào)節(jié)距離居中带猴。
所以在進(jìn)行居中定位的時候，為防止出錯一定要把display:block加上懈万，要么用margin:0 auto自動居中拴清，要么用position:absolute靶病，因?yàn)閍bsolute絕對定位可以覆蓋其他的居中方式。如果用position:relative口予，就一定要把margin:0 auto去掉娄周。
歡迎留言討論！
