CSS实现垂直居中

标签：osi   class   一半   也有   top   ott   idt   nbsp   使用   

问题描述：对一个div经常会碰到想要它垂直居中，一般情况下大家又是怎么实现的呢？小糕收集了6种方法( ?? ω ?? )y

方法一
对于文本的垂直居中方法

line-height:parent-wrapper-height;
text-align:center

这个应该也比较常见吧，对于像p标签，如果只有一行文本，可以用它的行高等于容器的高度，但是如果是超过一行这个方法就不可靠了。

方法二
已经知道模块宽和高的情况下：

position:absolute;
left:50%;
top:50%;
margin-left:-width/2;
margin-top:-height/2;

其实这个方法就是利用绝对定位，设50%就以一半为开始的位置，再利用margin负边调整让模块到了中间。

方法三
在不知道宽高的情况下，同样也是绝对定位：

position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;

margin的auto值本来不支持垂直居中的，但是在绝对定位这样设置可以的，而且其他的定位值可以修改，可以稍稍改变位置。

方法四
在不知道宽高的情况下，使用display中的table-cell：

display:table-cell;
verticle-align:center;
text-align:center;

如果中间是div横向用margin:0 auto;就可以解决，字则用text-align:center。

方法五
CSS3中新加的display:-webkit-box，同样可以用于不知道宽高的情况

display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

-webkit-box-align可以控制垂直居中，-webkit-box-pack控制横向居中。

方法六
CSS3用transform属性：

top:50%;            
left:50%;            
transform:translate(-50%,-50%);             
-webkit-transform:translate(-50%,-50%);             
-moz-transform:translate(-50%,-50%);             
-ms-transform:translate(-50%,-50%);

也有点类似于前面几种方法的感觉，只是transform不用知道它的宽高，它自己能计算。

CSS实现垂直居中

标签：osi   class   一半   也有   top   ott   idt   nbsp   使用   

原文地址：http://www.cnblogs.com/rimochiko/p/7419593.html