css實現垂直水平居中的方法

html結構：

<div class="box">
     <div>垂直居中</div>
</div>

方法1：display:flex

.box{

    display: flex;

    justify-content:center;

    align-items:Center;

}

方法2：絕對定位和負邊距

.box{position:relative;}
.box div{

            position: absolute;

            width:100px;

            height: 50px;

            top:50%;

            left:50%;

            margin-left:-50px;

            margin-top:-25px;

            text-align: center;

        }

方法3：translate

.box childdiv{

            position: absolute;

            top:50%;

            left:50%;

            width:100%;

            transform:translate(-50%,-50%);

            text-align: center;

        }

方法4：table-cell

.box{

    display: table-cell;

    vertical-align: middle;

    text-align: center;        

}

方法5：偏移量0+margin:auto

父元素設置相對或絕對定位；要居中的子元素設置絕對定位，全部偏移量爲0，外邊距爲auto：

.wrap{

  positon:relative;
}
.center{

  positon:absolute;

  top:0;bottom:0;left:0;right:0;

  margin:auto;
}