域名預(yù)訂/競(jìng)價(jià)，好“米”不錯(cuò)過

文字居中，文字垂直居中水平居中，圖片居中，圖片水平居中垂直居中，塊元素垂直居中?當(dāng)我們?cè)谧銮岸碎_發(fā)是時(shí)候關(guān)于css居中的問題是很常見的。情況有很多種，不同的情況又有不同的解決方式。水平居中的方式解決的時(shí)候相對(duì)來說通過css比較容易設(shè)置，垂直居中相對(duì)比較棘手。

先來說一下水平居中的不同情況與不同解決方法吧。

1文本，圖片等行內(nèi)元素的水平居中方法呢比較簡(jiǎn)單。直接給父元素設(shè)置一個(gè)text-align:centent屬性就可以實(shí)現(xiàn)元素的水平居中了。

2 確定寬度的塊級(jí)元素水平居中怎么設(shè)置呢?設(shè)置方法也不難，可以通過設(shè)置外邊距，margin：0 auto;這句來實(shí)現(xiàn)確定寬度的塊級(jí)元素水平居中。

3 不確定寬度的塊級(jí)元素設(shè)置水平居中的方法有多種，這里介紹三種方法給大家。

第一種方法呢，是使用table作為容器的方法來實(shí)現(xiàn)。當(dāng)然不大推薦使用這種方法，因?yàn)樘砑恿藷o意義的標(biāo)簽。這里就稍微介紹一下吧。Table標(biāo)簽本身并不是塊級(jí)元素，當(dāng)我們不設(shè)置table的寬度的話，他里面的寬度是由他內(nèi)部元素的寬度撐起來的。但即使我們沒有設(shè)置table的寬度，直接設(shè)置table的外邊距margin：0 auto;就可以實(shí)現(xiàn)水平居中了!這樣我們就可以通過設(shè)置table水平居中，間接使里面的內(nèi)容居中。

第二種方法，相對(duì)于用table的方法的好處是不用增加無語義標(biāo)簽，簡(jiǎn)化標(biāo)簽嵌套深度。這個(gè)思路是這樣的，通過改變塊級(jí)元素的display屬性值為inline類型，然后設(shè)置text-align:center來實(shí)現(xiàn)居中。這種方法也有一定不妥之處就是把塊級(jí)元素改為行內(nèi)元素后，行內(nèi)元素比塊元素少了一些功能。比如說設(shè)定長(zhǎng)寬值等，在項(xiàng)目運(yùn)用中可能會(huì)有一些限制，大家可以自行選擇。

下面是第三種方法。通過給父元素設(shè)置浮動(dòng)float，再設(shè)置父元素的position屬性為relative和left：50%;子元素設(shè)置position：relative和left：-50%來實(shí)現(xiàn)水平居中。這個(gè)好處是可以保留塊級(jí)元素仍然是以display：block的形式顯示，不會(huì)添加無意義的標(biāo)簽，不添加嵌套深度。確點(diǎn)是設(shè)置了position：relative;帶來了一些副作用。下面是第三種方法的實(shí)例代碼，放到body標(biāo)簽里面就可以了。

<div style=”width:400px;height:300px;background:#333;”>

<ul style=”margin:0 auto;float:left; position:relative; left:50%;list-style:none; padding:0;”>

<li style=”position:relative; left:-50%;float:left”>OKOKOKOKKOOKK</li>

</ul>

</div>

三種方法使用都比較廣泛，都有缺點(diǎn)和優(yōu)點(diǎn)。具體選擇哪種方法可視情況而定。Css文字圖片塊元素水平居中的方法就介紹到這里。

本文首發(fā)于：五指前端

申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！