CSS居中是前端工程師經(jīng)常要面對(duì)的問(wèn)題，也是基本技能之一。 CSS中的居中可分為水平居中和垂直居中。水平居中分為行內(nèi)元素居中和塊狀元素居中兩種情況，而塊狀元素又分為定寬塊狀元素居中和不定寬塊狀元素居中。今天，我們就和大家分享一些居中的常用方法。

1、把margin設(shè)為auto

具體來(lái)說(shuō)就是把要居中的元素的margin-left和margin-right都設(shè)為auto，此方法只能進(jìn)行水平的居中，且對(duì)浮動(dòng)元素或絕對(duì)定位元素?zé)o效。

2、使用line-height讓單行文字垂直居中

把文字的line-height設(shè)為文字父容器的高度，適用于只有一行文字的情況。

3、使用display:table-cell

對(duì)于那些個(gè)不是表格的元素，我們可以通過(guò)display:table-cell 來(lái)把它模擬成一個(gè)表格單元格，然后結(jié)合text-align:center;vertical-align:middle;來(lái)使元素居中。

4、利用css3的translate實(shí)現(xiàn)居中

css3里的移動(dòng)屬性也能實(shí)現(xiàn)元素的水平居中對(duì)齊。但是，需要注意的是只支持高版本瀏覽器，IE8及以下版本想都別想了。

5、彈性盒子實(shí)現(xiàn)垂直水平居中

彈性盒子也是css3新增的樣式，完全解決了垂直布局難的問(wèn)題。需要注意的是 ：一樣要考慮瀏覽器的兼容性。

6、使用表格

如果你使用的是表格的話，那完全不用為各種居中問(wèn)題而煩惱了，只要用到 td(也可能會(huì)用到 th)元素的 align=”center” 以及 valign=”middle” 這兩個(gè)屬性就可以完美的處理它里面內(nèi)容的水平和垂直居中問(wèn)題了,而且表格默認(rèn)的就會(huì)對(duì)它里面的內(nèi)容進(jìn)行垂直居中。

如果想在css中控制表格內(nèi)容的居中，垂直居中可以使用 vertical-align:middle，至于水平居中，貌似css中是沒(méi)有相對(duì)應(yīng)的屬性的,但是在IE6、7中我們可以使用text-align:center來(lái)對(duì)表格里的元素進(jìn)行水平居中，IE8+以及谷歌、火狐等瀏覽器的text-align:center只對(duì)行內(nèi)元素起作用，對(duì)塊狀元素?zé)o效。

7、使用絕對(duì)定位來(lái)進(jìn)行居中

此法只適用于那些我們已經(jīng)知道它們的寬度或高度的元素。

絕對(duì)定位進(jìn)行居中的原理是通過(guò)把這個(gè)絕對(duì)定位元素的left或top的屬性設(shè)為50%,這個(gè)時(shí)候元素并不是居中的，而是比居中的位置向右或向左偏了這個(gè)元素寬度或高度的一半的距離，所以需要使用一個(gè)負(fù)的margin-left或margin-top的值來(lái)把它拉回到居中的位置，這個(gè)負(fù)的margin值就取元素寬度或高度的一半。

如果只想實(shí)現(xiàn)一個(gè)方向的居中，則可以只使用left , margin-left 來(lái)實(shí)現(xiàn)水平居中，使用top , margin-top來(lái)實(shí)現(xiàn)垂直居中。

8、終極定位元素居中

通過(guò)讓內(nèi)部定位的盒子left，right，top，bottom四個(gè)值同時(shí)為0，然后讓margin的四個(gè)值自動(dòng)平分空間，實(shí)現(xiàn)元素的垂直水平都居中對(duì)齊。一樣要注意的是IE7及以下低版本瀏覽器的不配合問(wèn)題。

以上所述就是云和數(shù)據(jù)小編給大家介紹的CSS實(shí)現(xiàn)居中的幾種方法，希望對(duì)大家有所幫助。