垂直居中解决方案总结

点这个链接可以直接看到效果：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。
缺点：子元素高度固定的时候才能用，而且计算麻烦。

<style type="text/css">
    .outer1 {
        position: relative;
    }
    
    .inner1 {
        position: absolute;
        top: 50%;
        margin-top: -40px;
        height: 80px;
    }
</style>
<div class="outer outer1">
    <div class="inner inner1">
        <p>first line</p>
        <p>second line</p>
    </div>
</div>

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

<style type="text/css">
    .outer2 {
        position: relative;
    }
    
    .inner2 {
        position: absolute;
        top: calc(50% - 40px);
        height: 80px;
    }
</style>
<div class="outer outer2">
    <div class="inner inner2">
        <p>first line</p>
        <p>second line</p>
    </div>
</div>

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

<style type="text/css">
    .outer3 {
        position: relative;
    }
    
    .inner3 {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
</style>
<div class="outer outer3">
    <div class="inner inner3">
        <p>first line</p>
        <p>second line</p>
    </div>
</div>

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

<style type="text/css">
    .outer4 {
        position: relative;
    }
    
    .inner4 {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        width: 100px;
        height: 80px;
    }
</style>
<div class="outer outer4">
    <div class="inner inner4">
        <p>first line</p>
        <p>second line</p>
    </div>
</div>

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

<style type="text/css">
    .outer5 {
        display: table-cell;
        vertical-align: middle;
    }
    
    .inner5 {
        display: table;
    }
</style>
<div class="outer outer5">
    <div class="inner inner5">
        <p>first line</p>
        <p>second line</p>
    </div>
</div>

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

<style type="text/css">
    .outer6 {
        line-height: 200px;
    }
    
    .inner6 {
        display: inline-block;
        vertical-align: middle;
        height: 80px;
        line-height: 1;
    }
</style>
<div class="outer outer6">
    <div class="inner inner6">
        <p>first line</p>
        <p>second line</p>
    </div>
</div>

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

<style type="text/css">
    .outer7:before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
    
    .inner7 {
        display: inline-block;
        vertical-align: middle;
    }
</style>
<div class="outer outer7">
    <div class="inner inner7">
        <p>first line</p>
        <p>second line</p>
    </div>
</div>