CSS垂直水平居中8种方法

一、定位方法：

公用HTML

1.

    .box1{
            width:100px;
            height:100px;
            background:aqua;
            position:absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            margin:auto;
        }

折一张图片就可以了

2.

.box1{
            width:100px;
            height:100px;
            background:aqua;
            position:absolute;
            top:50%;
            left:50%;
            margin-left:-50px;
            margin-bottom:-50px;
        }

3.

.box1{
            background:aqua;
            position: absolute; 
            width: 6em; 
            height: 6em;
            top: calc(50% - 3em); 
            left: calc(50% - 3em); 
        }

4.

    .box1{
            position: absolute; 
            top:50%;
            left:50%;
            transform:translate(-50% -50%);
        }

二、Flex方法 给父级元素

    .box{
            display:flex;
            justify-content: center;
            align-items: center;
            height:100px;
            background:aqua;
        }

三、vh方法:兼容性为：Chrome 20+, IE9+ 以及Safari 6支持！

        .box{
            display:flex;
            min-height: 100vh;
            margin:0;
        }
        .box1{      
           margin:auto;
        }

四、table 方法

    .box{   
        text-align: center;    
        }
        .box1{
        width:300px;
        height:300px;
        border:1px solid;   
        display:table-cell;
        vertical-align: middle;
        }

五、最后一种方法略麻烦

html,body{
        height: 100%;
        margin: 0;
    }
    body{
        text-align: center;
    }
    body:after{
        height: 100%;
        content: '';
        display: inline-block;      
        vertical-align: middle;
    }
    .box{
        height:100px;
        display: inline-block;
        vertical-align: middle;
        width:100px;        
        border:1px solid;
    }