垂直居中解決方案總結

點這個連接能夠直接看到效果：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>