CSS 水平垂直居中

wujl596 發(fā)布于2019-08-29 15:27 / 2301人閱讀

摘要：聚沙成塔，聚水成涓父元素高度確定的單行文本設(shè)置只是單行文本水平垂直居中，塊級(jí)元素并沒(méi)有實(shí)現(xiàn)水平垂直居中方法一使用，設(shè)置特點(diǎn)兼容性好，不過(guò)需固定寬高注意如果不設(shè)置為則將基于根元素定位居中實(shí)現(xiàn)水平垂直居中方法二同時(shí)設(shè)置特點(diǎn)可

聚沙成塔，聚水成涓！

line-height

父元素高度確定的單行文本設(shè)置 height=line-height

   body {
        background: black;
    }
    
    .c2 {
        height: 80px;
        line-height: 80px;
        width: 80px;
        text-align: center;
        background: red;
    }
   


    123123

只是單行文本水平垂直居中，塊級(jí)元素并沒(méi)有

position:absolute 實(shí)現(xiàn)水平垂直居中方法一

使用position:absolute，設(shè)置 left、top、margin-left、margin-top

  .c1 {
        height: 300px;
        width: 300px;
        background: black;
        position: relative;
    }
    
    .c2 {
        height: 200px;
        width: 200px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -100px;
        margin-left: -100px;
        background: red;
    }

特點(diǎn)：兼容性好，不過(guò)需固定寬高
注意：如果不設(shè)置c1 position為relative,則c2將基于根元素定位居中

position: absolute 實(shí)現(xiàn)水平垂直居中方法二

position:absolute,同時(shí)設(shè)置top/bottom/right/left

body {
        background: black;
    }
    
    .block {
        height: 200px;
        width: 200px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background: red;
    }

特點(diǎn)：可不用設(shè)置高寬，且兼容性好

position: fixed 可實(shí)現(xiàn)水平垂直居中方法一

使用position:fixed,同樣設(shè)置left、top、margin-left、margin-top的屬性

 body {
        background: black;
    }
    
    .block {
        height: 200px;
        width: 200px;
        position: fixed;
        left: 50%;
        top: 50%;
        margin-top: -100px;
        margin-left: -100px;
        background: red;
    }

特點(diǎn)：position:fixed; IE 不支持,且需固定寬高

position: fixed 實(shí)現(xiàn)水平垂直居中方法二

設(shè)置position:fixed ，同時(shí)設(shè)置left/right/top/bottom為0，margin:auto

   body {
        background: black;
    }
    
    .block {
        height: 200px;
        width: 200px;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background: red;
    }

特點(diǎn)： position:fixed IE 不支持，不過(guò)不需固定寬高

display: table-cell

display:table-cell屬性使內(nèi)容垂直居中

 body {
        background: black;
    }
    
    .block {
        height: 200px;
        width: 200px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        background: red;
    }


    123123

特點(diǎn)：使內(nèi)容居中，塊級(jí)元素不能居中

CSS3 display: -webkit-box

使用css3的display:-webkit-box屬性，再設(shè)置-webkit-box-pack:center/-webkit-box-align:center

  body {
        display: -webkit-box;
        -webkit-box-pack: center;
        -webkit-box-align: center;
        background: black;
    }
    
    .block {
        height: 200px;
        width: 200px;
        color: yellow;
        display: -webkit-box;
        -webkit-box-pack: center;
        -webkit-box-align: center;
        background: red;
    }
    
       
           123123

特點(diǎn)：無(wú)需定寬高，行內(nèi)和塊級(jí)元素都可水平垂直居中！但CSS3 IE 兼容性要考慮

CSS3 transform:translate(x,y)

 body {
        background: black;
    }
    
    .block {
        height: 200px;
        width: 200px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background: red;
    }
    
       
         123123

特點(diǎn)：無(wú)需固定寬高但只能使塊級(jí)元素水平垂直居中！但CSS3 在 IE 兼容性需要考慮