CSS居中是前端工程師經常要面對的問題，也是基本技能之一。

CSS中的居中可分為水平居中和垂直居中。水平居中分為行内元素居中和塊狀元素居中兩種情況，而塊狀元素又分為定寬塊狀元素居中和不定寬塊狀元素居中。

今天，我們就和大家分享一些居中的常用方法。

具體來說就是把要居中的元素的margin-left和margin-right都設為auto，此方法隻能進行水平的居中，且對浮動元素或絕對定位元素無效。

把文字的line-height設為文字父容器的高度，适用于隻有一行文字的情況。

對于那些個不是表格的元素，我們可以通過display:table-cell 來把它模拟成一個表格單元格，然後結合text-align:center;vertical-align:middle;來使元素居中。

css3裡的移動屬性也能實現元素的水平居中對齊。但是，一樣注意的是隻支持高版本浏覽器。IE8及以下版本想都别想了。

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

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

如果想在css中控制表格内容的居中，垂直居中可以使用 vertical-align:middle，至于水平居中，貌似css中是沒有相對應的屬性的,但是在IE6、7中我們可以使用text-align:center來對表格裡的元素進行水平居中，IE8 以及谷歌、火狐等浏覽器的text-align:center隻對行内元素起作用，對塊狀元素無效。

此法隻适用于那些我們已經知道它們的寬度或高度的元素。

絕對定位進行居中的原理是通過把這個絕對定位元素的left或top的屬性設為50%,這個時候元素并不是居中的，而是比居中的位置向右或向左偏了這個元素寬度或高度的一半的距離，所以需要使用一個負的margin-left或margin-top的值來把它拉回到居中的位置，這個負的margin值就取元素寬度或高度的一半。

如果隻想實現一個方向的居中，則可以隻使用left , margin-left 來實現水平居中，使用top , margin-top來實現垂直居中。

通過讓内部定位的盒子left，right，top，bottom四個值同時為0，然後讓margin的四個值自動平分空間，實現元素的垂直水平都居中對齊。一樣要注意IE7及以下低版本浏覽器的不配合問題。

以上所述是小編給大家介紹的CSS實現居中的幾種方法，希望對大家有所幫助。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!