CSS世界中，垂直水平居中是常見的需求，但也經常讓人困惑。下面簡要介紹幾種經典的垂直水平居中實現方法。

/* 方案一：絕對定位 + margin自動計算*/
.parent{
position: relative;
}
.child{
position: absolute;
top: 50%;
left: 50%;
margin: -height/2 0 0 -width/2;
}
/* 方案二：絕對定位 + transform變換 */
.parent{
position: relative;
}
.child{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 方案三：flex布局*/
.parent{
display: flex;
justify-content: center;
align-items: center;
}
/* 方案四：表格布局 */
.parent{
display: table-cell;
vertical-align: middle;
text-align: center;
}
/* 方案五：grid布局 */
.parent{
display: grid;
}
.child{
justify-self: center;
align-self: center;
}

以上是常見的幾種垂直水平居中實現方法，不同的場景下可以選用不同的方法。移到練習中去吧！