Lyrics

< More and better />

div垂直居中，水平居中各种方法

水平居中

  1. 定宽，定高

    1
    2
    3
    4
    5
    6
    div{
        width:100px;
        height:100px;
        background:blue;
        margin: 0 auto;
    }

  2. 不定宽，不定高

    1
    2
    3
    4
    5
    6
    父元素设置
    div{
        display:flex
        justify-content:center
    }

  3. 垂直水平居中

    定宽，定高

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    子元素设置：
    div{
        position:absolute;
        width:100px;
        height:100px;
        top:50%;
        left:50%;
        margin-top:-50px;
        margin-left:-50px;
        
    }

不定高宽

  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    父元素设置 .parent {
        text-aligin:center;
    }
    子元素设置 .child{
        display:inline - block;
        vertical-align:middle;
        
    }
    2:
    父元素.A{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        
    }
    子元素.B{
        position:absolute;
        top:0;left:0;
        right:0;bottom:0;
        margin:auto
        
    }

使用flex 布局