【Web前端基础知识】关于css居中

3. transform + absolute

  absolute定位元素的left、top属性是子元素的左边界、上边界相对父元素进行定位;transform是CSS3中非常强大的一个属性，可以接收多个属性值，包括旋转、缩放、平移等多种功能。这里使用二者配合，先将子元素左上定点定位到父元素中心点，再使用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函数的参数，最后的计算值不能为小数，否则有的浏览器渲染出来效果会模糊，所以使用本方法的话最好设置一下宽高为偶数。

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设置了left和top再通过平移或者margin将元素重新定位回去。如果我们直接可以计算出正确的left和top值，岂不是一次到位?calc函数正有此功能，当然我们需要知道子元素的宽高：

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是一个作用于内联元素的属性。内联元素的特性是会和其它内联元素或者文字在同一行显示，但是默认情况下是与父元素“基线对齐”的。这里的的基线指的是父元素每一行中的一个垂直位置，是英文x下边缘所在的水平, 通过设置vertical-align为middle可以将内联元素的中部对齐父元素的中部(基线+字母x的一半高度)。所以可以利用这一点，将父元素的行高设置为其自身高度，然后将子元素与父元素中线对齐，即可实现垂直居中。

代码：

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. }