垂直居中解决方案总结

点这个链接可以直接看到效果：http://www.zhouyangyang.com/c...

这是公用样式

.outer {
    width: 150px;
    height: 200px;
    background: pink;
    border: 1px solid pink;
}
.inner {
    background: #77BFCD;
}

1,负margin
父元素position relative,子元素position absolute,top 50%,margin-top 为负的元素height/2。
缺点：子元素高度固定的时候才能用，而且计算麻烦。

    

        
first line
        
second line
    

2，css3 calc()
跟上面没啥区别，也是要子元素高度固定，手动除以2。
不过可以少写一行margin-top。

    

        
first line
        
second line
    

3,translateY
百分比形式的margin-top是相对于元素包含块的宽度的，所以上面的方法都要手动除以2。
而 translateX translateY 的百分比是相对于元素自身的宽高，这个方法可以用于子元素高度不确定时，而且不用手动除以2，比上面几个方便了很多。
有些浏览器下，transform后如果宽高的像素点不是整数，显示会模糊，可以用transform-style:preserve-3d修复。

    

        
first line
        
second line
    

4,margin auto，top right left bottom 全为0
可以实现上下左右居中，超级方便,这也是我在项目里用得最多的。不过这个只能在元素设置了宽高的时候用。

    

        
first line
        
second line
    

上面是基于绝对定位的解决方案，还有其他的。
5，表格布局
父元素display table-cell,virticl-align middle,子元素display table。

    

        
first line
        
second line
    

6，行内块方法
将子元素设置display:inline-block，vetical-align:middle,父元素行高等于高度，
缺点是只能用在父元素高度固定的条件下。

    

        
first line
        
second line
    

7，另一种行内块方法
给父元素一个:before伪子元素，让这个伪元素height:100%，然后让这个伪子元素和真正的子元素都display:inline-block vetical-align:middle。

    

        
first line
        
second line