【Web前端基礎知識】關于css居中

CSS控制居中是前端開發中非常常用的布局技能，本文列出幾種CSS控制元素居中的幾種方法。

一、水平居中

  使用CSS控制水平居中很簡單：

· 塊級元素 設置width,并設置margin auto

· 內聯元素 父元素設置text-align center

HTML代碼如下:

1. <div class="container"> 
2.   <div class="content"> 
3.     水平居中哦 
4.   div> 
5. div> 

1. 塊級元素水平居中

1. .container { 
2.   height: 300px; 
3.   width: 300px; 
4.   border: 1px solid red; 
5. } 
6.  
7. .content { 
8.   width: 10rem; 
9.   border: 1px solid green; 
10.   margin: 0 auto; 
11. } 

2. 內聯元素水平居中

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

代碼很簡單，而且沒什么兼容性問題，所以通常也不需要用別的復雜方式來實現水平居中效果。

二、水平垂直居中

  使用CSS控制垂直居中(或者水平垂直居中)就不像控制垂直居中那么方便，這里主要羅列幾種。

1. flex布局

flex布局出現以后，垂直居中就很方便了，直接設置父元素：

1. display flex 
2. align-items center 

如果同時要水平居中，則同時設置：

1. justify-content center 

需要注意的是IE10+才支持，webkit前綴瀏覽器設置flex屬性需要加webkit。

1. .container { 
2.   width: 300px; 
3.   height: 300px; 
4.   border: 1px solid red; 
5.   display: -webkit-flex; 
6.   display: flex; // 關鍵屬性 
7.   align-items: center;　// 垂直居中 
8.   justify-content: center // 水平居中 
9. } 
10.  
11. .content { 
12.   border: 1px solid green; 
13. } 

2. margin+ position:absolute布局

  position: absolute布局的元素，通過設置top/bottom, left/right這兩對屬性，可以讓元素在垂直方向和水平方向分別具有了自適應的特性。就像div在水平方向的默認表現一樣!

上文中對于塊級元素的水平居中，我們設置寬度然后配合以margin可以實現水平居中。而對于設置了top/bottom,left/right的absolute定位元素，我們設置寬高再配合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: 0; 
11.   right: 0; 
12.   top: 0; 
13.   bottom: 0; 
14.   width: 200px; 
15.   height: 100px; 
16.   margin: auto; 
17.   border: 1px solid green; 
18. } 

兼容性很好，IE8以上支持。