總結CSS3的新特性來總結垂直居中的實作方法分享

CSS3中的flex佈局和before偽元素等特性用來實現垂直居中真的是太方便和優雅了,這裡我們就來總結CSS3的新特性來總結垂直居中的實現方法分享:

#0.單行內容的居中
只考慮單行是最簡單的，無論是否給容器固定高度，只要給容器設定line-height 和height，並使兩值相等，再加上over-flow: hidden 就可以了

.middle-demo-1{   
height: 4em;   
line-height: 4em;   
overflow: hidden;   
}

優點：
（1）. 同時支援區塊級和內聯極元素
（2）.支援所有瀏覽器
缺點：
（1）. 只能顯示一行
（2）. IE中不支援a1f02c36ba31691bcfe87b2722de723b等的居中
要注意的是：
（1）. 使用相對高度定義你的height 和line-height
（2）. 不想毀了你的佈局的話，overflow: hidden 一定要
為什麼？
請比較以下兩個例子：

<p style="background: #900; color: #00f; font: bold 12px/24px Helvertica,Arial,sans-serif; height:24px; width:370px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<br/>
<br/>
<p style="background: #090; color: #00f; font: bold 12px/2em Helvertica,Arial,sans-serif; height:2em; width:370px; overflow: hidden;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

上一個高度是用的絕對單位px，並且沒有隱藏溢出，下一個高度用的單位是相對單位em，並且隱藏了溢出。如果你的瀏覽器支援放大字體，那麼盡情地放大字體，看看會出現什麼效果。

1.使用position:absolute（fixed）,設定left、top、margin-left、margin-top的屬性;

.box{   
    position:absolute;/*或fixed*/
    top:50%;   
    left:50%;   
    margin-top:-100px;   
    margin-left:-200px;   
}

2.利用position:fixed（absolute）屬性，margin:auto這個必須不要忘記了;

.box{   
    position: absolute;或fixed
    top:0;   
    rightright:0;   
    bottombottom:0;   
    left:0;   
    margin: auto;   
}

3.利用display:table-cell屬性讓內容垂直居中;

.box{   

display:table-cell;   

vertical-align:middle;   

text-align:center;   

width:120px;   

height:120px;   

background:purple;   

}

4.使用css3的新屬性transform:translate(x,y)屬性;

.box{   
    position: absolute;   
    transform: translate(50%,50%);   
    -webkit-transform:translate(50%,50%);   
    -moz-transform:translate(50%,50%);   
    -ms-transform:translate(50%,50%);   
}

5.最高大上的一種，使用:before元素;

.box{   

position:fixed;   

display:block;   

background:rgba(0,0,0,.5);   

}   

.box:before{   

content:'';   

display:inline-block;   

vertical-align:middle;   

height:100%;   

}   

.box.content{   

width:60px;   

height:60px;   

line-height:60px;   

color:red;

##6.Flex佈局;

.box{   
    display: -webkit-box;   
    display: -webkit-flex;   
    display: -moz-box;   
    display: -moz-flex;   
    display: -ms-flexbox;   
    display: flex;   
    水平居中   
    -webkit-box-align: center;   
    -moz-box-align: center;   
    -ms-flex-pack:center;   
    -webkit-justify-content: center;   
    -moz-justify-content: center;   
    justify-content: center;   
     垂直居中    
    -webkit-box-pack: center;   
    -moz-box-pack: center;   
    -ms-flex-align:center;   
    -webkit-align-items: center;   
    -moz-align-items: center;   
    align-items: center;   
}

#

以上是總結CSS3的新特性來總結垂直居中的實作方法分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！