CSS水平垂直居中方法

一、flex布局
1、.box {
    display: flex;
    justify-content: center;
    align-items: center;
}
2、.box { /* 父元素 */
    display: flex; /* 或者inline-flex */
    justify-content: center;
}
.item { /* 子元素 */
    align-self:center;
}
3、.box {
    display: flex;
    place-content: center;
}
.item {
    align-self: center;
}
4、.box {
    display: flex;
    place-content: center;
    place-items: center;
}
5、.box {
    display: flex;
}
.item {
    margin: auto;
}

二、Grid方式
.box {
    display: grid; /* 或者inline-gird */
    place-items: center;
}

三、定位
1、.box {
    position: relative;
}
.item {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px; /* 高的一半 */
    margin-left: -50px; /* 宽的一半 */
}
2、.box {
    position: relative;
}
.item {
    position: absolute;
    margin: auto;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
3、.box {
    position: relative;
}
.item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* top left 偏移值 */
}