css样式绝对居中

/* 绝对居中 */

/* 方法一: */

.parent{

    display: flex;

    justify-content: center;

    align-items: center;

}

/* 方法二 */

.parent{

    width: 100px;

    height: 100px;

    position: relative;

    background: #ccc;

}

.child{

    width:40px;

    height: 40px;

    background: #000;

    position: absolute;

    left:50%;

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

}

/* 方法三 */

.parent{

    width:100px;

    height:100px;

    position: relative;

    background:#f91;

}

.child{

    width:40px;

    height:40px;

    background:#ccc;

    position: absolute;

    left:0;

    top:0;

    bottom: 0;

    right:10

}

/* 方法四 */

.parent:{

    width:100px;

    height: 100px;

    display: table-cell;

    background-color: #ccc;

    text-align: center;

    vertical-align: middle;

}

.child{

    width:40px;

    height: 40px;

    background-color: #000;

    display: inline-block;

}