CSS垂直水平居中8种方法

一、定位方法：

公用HTML<div class="box">    <div class="box1"></div></div>

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;    }