已知宽高元素和未知宽高元素水平垂直居中

---

已知高宽元素水平垂直居中

---

1. 方法一

水平居中

margin：0 auto；

2. 方法二

position:relative;
left:0;
top:0;
margin:auto;

3. 方法三

position:relative;
left:-50%;
top:-50%;
margin-top:-高度一半;
margin-left:-宽度一半;

---

未知高宽元素水平垂直居中

---

1. 定位+位移

position:relative;
top:50%;
left:50%;
transform:translate(-50%,-50%);

2. 父flex，子水平垂直居中

.father{
    dispaly:flex;
}
.son{
    justify-content:center;
    align-items:center;
}

3. 父网格元素，子水平垂直居中

.father{
    display:grid;
}
.son{
    justify-content:center;
    align-items:center;
}

4. 父表格元素，子水平垂直居中

.father{
    display:table-cell;
}
.son{
    text-align:center;
    vertical-align:middle;
    display;inline-block;
}