【W(wǎng)eb前端基礎(chǔ)知識】關(guān)于css居中

3. transform + absolute

  absolute定位元素的left、top屬性是子元素的左邊界、上邊界相對父元素進行定位;transform是CSS3中非常強大的一個屬性，可以接收多個屬性值，包括旋轉(zhuǎn)、縮放、平移等多種功能。這里使用二者配合，先將子元素左上定點定位到父元素中心點，再使用transform將子元素中心點移動到父元素的中心點即可：

1. .container { 
2.   width: 300px; 
3.   height: 300px; 
4.   position: relative; 
5.   border: 1px solid red; 
6. } 
7.  
8. .content { 
9.   position: absolute; 
10.   left: 50%; 
11.   top: 50%; 
12.   transform: translate(-50%, -50%);   
13.   border: 1px solid green; 
14. } 

  這個方法有個小缺陷，就是translate函數(shù)的參數(shù)，最后的計算值不能為小數(shù)，否則有的瀏覽器渲染出來效果會模糊，所以使用本方法的話最好設(shè)置一下寬高為偶數(shù)。

4. absolute+margin負值

  與上一種方法很類似，上一種方法是使用transform將元素向左上平移，本方法則是使用margin負值的方式將元素拉向左上角。

代碼：

1. .container { 
2.   width: 300px; 
3.   height: 300px; 
4.   position: relative; 
5.   border: 1px solid red; 
6. } 
7.  
8. .content { 
9.   position: absolute; 
10.   left: 50%; 
11.   top: 50%; 
12.   width: 200px; 
13.   height: 100px; 
14.   margin-top: -50px; 
15.   margin-left: -100px; 
16.   border: 1px solid green; 
17. } 

5. absolute + calc

  從上兩種方法可以看到，absolute設(shè)置了left和top再通過平移或者margin將元素重新定位回去。如果我們直接可以計算出正確的left和top值，豈不是一次到位?calc函數(shù)正有此功能，當然我們需要知道子元素的寬高：

1. .container { 
2.   width: 300px; 
3.   height: 300px; 
4.   border: 1px solid red; 
5.   text-align: center; 
6.   position: relative; 
7. } 
8.  
9. .content { 
10.   position: absolute; 
11.   border: 1px solid green; 
12.   width: 200px; 
13.   height: 100px; 
14.   left: calc(50% - 100px); 
15.   top: calc(50% - 50px); 
16. } 

6. line-height + vertical-align

  vertical-align是一個作用于內(nèi)聯(lián)元素的屬性。內(nèi)聯(lián)元素的特性是會和其它內(nèi)聯(lián)元素或者文字在同一行顯示，但是默認情況下是與父元素“基線對齊”的。這里的的基線指的是父元素每一行中的一個垂直位置，是英文x下邊緣所在的水平, 通過設(shè)置vertical-align為middle可以將內(nèi)聯(lián)元素的中部對齊父元素的中部(基線+字母x的一半高度)。所以可以利用這一點，將父元素的行高設(shè)置為其自身高度，然后將子元素與父元素中線對齊，即可實現(xiàn)垂直居中。

代碼：

1. .container { 
2.   width: 300px; 
3.   height: 300px; 
4.   border: 1px solid red; 
5.   line-height: 300px; 
6.   text-align: center; 
7. } 
8.  
9. .content { 
10.   display: inline-block; 
11.   line-height: 1.5; 
12.   border: 1px solid green; 
13.   vertical-align: middle; 
14. }