使⽤CSS定位元素实现⽔平垂直居中效果总结⼀下平时使⽤CSS技巧使元素达到⽔平居中效果
  相对定位（或绝对定位）实现⽔平垂直居中：
1element{
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  }
css设置文字垂直居中
　缺点：需要提前知道元素的尺⼨。否则⽆法精确调整margin的值
但是有⼀个替代⽅案就是使⽤CSS3的transform属性。⼿机兼容性良好
1element{
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偏移的百分⽐值是相对于元素⾃⾝⼤⼩的。
  优点：⽆论定位元素的尺⼨是多少，元素的显⽰⽅式都是⽔平垂直居中显⽰的。
  绝对定位实现⽔平居中：
1element{
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，则平分剩余空间；

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。