使用CSS定位元素实现水平垂直居中效果

总结一下平时使用CSS技巧使元素达到水平居中效果

　　相对定位（或绝对定位）实现水平垂直居中：

 element{
   position:relative; /*这个属性也可以是absolute*/
   width:200px; /*宽度按自己的要求设定*/
   height:500px; /*高度按自己的要求设定*/
   margin-left: -100px; /*这个值是宽度的一半，如宽度设置了100px,则这个属性的值就是-50px*/
   margin-top: -250px; /*这个值是高度的一半*/
   left: 50%;
   top: 50%;
  }

　缺点：需要提前知道元素的尺寸。否则无法精确调整 margin 的值

但是有一个替代方案就是使用CSS3的 transform 属性。手机兼容性良好

 element{
   width: 400px;
   height: 500px;
   position:relative; /*这个属性也可以是absolute*/
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
 }

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

　　优点：无论定位元素的尺寸是多少，元素的显示方式都是水平垂直居中显示的。

　　绝对定位实现水平居中：

 element{
   position:absolute; /*这里只能使用绝对定位元素*/
   margin: auto;
   left:;
   right:;
   top:;
   bottom:;
 }

　　具有流体特性绝对定位元素的 margin: auto; 的填充规则和普通流体元素一模一样：

　　　　1. 如果一侧定值， 一侧auto, auto为剩余空间大小；

　　　　2. 如果两侧都是auto,则平分剩余空间；