css元素的垂直水平居中；flex 已知元素宽高 未知元素宽高

1、 使用flex布局实现元素的垂直水平居中

.box {
    display: flex;
    justify-content: center;
    align-items: center;
}

2、 已知元素的宽高，实现元素的垂直水平居中
先将元素整体向左、向下移动相对水平居中元素的50％，再利用margin为负值，反向拖动元素本身大小的一半，即可实现。注意⚠️：left，top属性的百分号是相对父元素取值的。

.box {
    width: 200px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -150px;
}

3、 未知元素的宽高，实现元素的垂直水平居中
先将元素整体向左、向下移动相对水平居中元素的50％，再利用margin为负值，反向拖动元素本身大小的一半，即可实现。注意⚠️：translateX属性的百分号取值是相对元素本身取值的。

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