1.先讓盒子的上下邊緣和父盒子的垂直中心線重疊,然后讓子盒子往回移動自身高度的一半
```
.f{
width: 200px;
height: 200px;
position: relative;
}
.z{
width: 100px;
height: 100px;
position: absolute;
margin-top: 100px;
top: -50px;
}
```
2.使用dispaly:table-cell和vertical-align:middle使盒子以表格的形式呈現
```
.f{
width: 200px;
height: 200px;
display: table-cell;
vertical-align: middle;
}
.z{
width: 100px;
height: 100px;
}
```
3.使用margin計算盒子的上下邊距,使盒子居中
```
.f{
width: 200px;
height: 200px;
}
.z{
width: 100px;
height: 100px;
margin-top: 50px;
}
```