HTML和CSS

1. 如何让一个盒子水平垂直居中？兼容性？不知道宽高的情况下？

//兼容性比较好是写在子元素上 知道宽高
子元素 {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left:  -50px;
        margin-top: -50px;
        width: 100px;
        height: 100px;
        background: red;
}

//兼容性好 不知道宽高
子元素 {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);//如果只横向对齐就只translateX
}

//兼容性一般
父级 {
        display: flex;
        justify-content: center;
        align-items: center;
}

父级 {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
}
//父级写了子级会变成行内块元素