css元素水平垂直居中的方法

1. 利用定位。

父元素设置相对定位，子元素设置绝对定位+margin:auto：

.box{
        position:relative;
    }
.content{
        position:absoulte;
        top:0;
        bottom:0;
        left:0;
        right:0;
        margin:auto;
       }

2. 利用定位。

父元素设置相对定位，子元素设置绝对定位，距上50%，距左50%，然后减去元素自身宽度。

(1)已知元素宽高

.box{
        position:relative;
    }
.content{
        position:absoulte;
        width:100px;
        height:100px;
        top:50%;
        left:50%;
        margin:-50px 0 0 -50px;
       }

(2)未知元素宽高

.box{
        position:relative;
    }
.content{
        position:absoulte;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
       }

3. flex弹性布局。

父元素设置flex布局

.box{
        display:flex;
        justify-content:center;//垂直居中
        algin-items:center;//水平居中
    }

4. 利用table布局。

父元素设置display:table-cell，子元素设置display:inline-table，利用vertical和text-align实现

.box{
        display:table-cell;
        vertical-align:middle;//垂直居中
        text-align:center;//水平居中
    }
.center{
        display:inline-block;//行内块元素
    }

(table布局：父级容器----display:table，子级容器----display:table-cell，空间平均划分：子级容器默认是自动平分宽度占满父级容器）