使用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,则平分剩余空间；
