元素垂直居中五種方法

  1. hack：
    position:absolute;
    margin:auto;
    top:0;
    right:0;
    bottom:0;
    left:0;

  2. 父級(jí)寫：
    display:flex;
    align-items:center; //垂直居中
    justify-content:center;//水平居中

  3. 絕對(duì)定位：
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-200px;//當(dāng)前元素高度的一半
    margin-left:-100px;//當(dāng)前元素寬度的一半

margin:0 auto;
line-height:100px; //當(dāng)前元素的高度

  1. css3的
    position:absolute;
    top:50%;
    left:50%;
    -ms-transform: translate(-50%,-50%); /* IE 9 /
    -webkit-transform: translate(-50%,-50%); /     Safari and Chrome /
    -o-transform: translate(-50%,-50%); /     Opera /
    -moz-transform: translate(-50%,-50%); /     Firefox */
    transform: translate(-50%,-50%);

附上參考張?chǎng)涡竦逆溄樱?br> http://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D-%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容