使用CSS定位元素實現水平垂直居中效果

總結一下平時使用CSS技巧使元素達到水平居中效果

 

　　相對定位（或絕對定位）實現水平垂直居中：

1 element{
2   position:relative; /*這個屬性也能夠是absolute*/
3   width:200px; /*寬度按本身的要求設定*/
4   height:500px; /*高度按本身的要求設定*/   
5   margin-left: -100px; /*這個值是寬度的一半，如寬度設置了100px,則這個屬性的值就是-50px*/
6   margin-top: -250px; /*這個值是高度的一半*/  
7   left: 50%;   
8   top: 50%;       
9  }

 

　缺點：須要提早知道元素的尺寸。不然沒法精確調整 margin 的值

 

可是有一個替代方案就是使用CSS3的 transform 屬性。手機兼容性良好

1 element{
2   width: 400px;
3   height: 500px;
4   position:relative; /*這個屬性也能夠是absolute*/ 
5   left: 50%;
6   top: 50%;
7   transform: translate(-50%, -50%);       
8 }

　　上面代碼使用 transform 代替了 margin , transform 中 translate 偏移的百分比值是相對於元素自身大小的。

　　優勢：不管定位元素的尺寸是多少，元素的顯示方式都是水平垂直居中顯示的。

 

　　絕對定位實現水平居中：

1 element{
2   position:absolute; /*這裏只能使用絕對定位元素*/
3   margin: auto;
4   left:0; 
5   right: 0;
6   top: 0;
7   bottom: 0;   
8 }

　　具備流體特性絕對定位元素的 margin: auto; 的填充規則和普通流體元素如出一轍：

　　　　1. 若是一側定值， 一側auto, auto爲剩餘空間大小；

　　　　2. 若是兩側都是auto,則平分剩餘空間；