使用CSS定位元素实现水平垂直居中效果-优快云博客

本文介绍了几种使用CSS实现元素水平垂直居中的方法，包括相对定位、绝对定位及CSS3的transform属性等，并对比了各自的优缺点。

总结一下平时使用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,则平分剩余空间；

转载于:https://www.cnblogs.com/zhangyuezhen/p/7190628.html