css元素居中的操作

本篇內(nèi)容主要講解“css元素居中的操作”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“css元素居中的操作”吧!

水平居中

若為行內(nèi)元素，對(duì)其父元素用text-align:center即可；

若為塊元素（無(wú)浮動(dòng)），則一般有兩種方法可實(shí)現(xiàn)對(duì)其的水平居中，一為margin:0 auto;二為通過(guò)css計(jì)算函數(shù)calc；

垂直居中

若為行內(nèi)元素，一般對(duì)其父元素用line-height:{height}即可，若為圖片元素則需再對(duì)該元素使用vertical-align:middle；

另由可通過(guò)對(duì)表格元素td使用vertical-align:middle可對(duì)其內(nèi)的元素進(jìn)行垂直居中可知，通過(guò)對(duì)父元素使用display:table-cell;vertical-align:middle;也可實(shí)現(xiàn)對(duì)元素的垂直居中，且該種方法無(wú)論行內(nèi)元素還是塊元素均可使用；

若為塊元素（行內(nèi)元素使用這種方法最終也會(huì)變成塊元素），則可通過(guò)position等一些屬性來(lái)實(shí)現(xiàn)元素的垂直居中，基本步驟為：1.設(shè)置父元素position:relative;2.設(shè)置元素position:absolute;top:50%;left:50%;3.設(shè)置元素margin-top:-{height}/2;margin-left:-{width}/2;

浮動(dòng)元素的居中

若為浮動(dòng)的塊元素（如float:left），則需通過(guò)position等一些屬性來(lái)實(shí)現(xiàn)元素的水平垂直居中，基本步驟為：1.元素外層套一個(gè)div,且設(shè)置其樣式：float:left;overflow:hidden;display:inlineblock;2.將外層div position屬性設(shè)置為relative,且top、left值均為50%；3.設(shè)置元素樣式：transform:translate(-50%, -50%);

到此，相信大家對(duì)“css元素居中的操作”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！